JavaScript TransitionEvent propertyName Property: CSS Transition Property Name

Table of Contents

JavaScript `TransitionEvent propertyName` Property: Identifying the Transitioned CSS Property

The TransitionEvent interface in JavaScript provides specific information about CSS transitions that have occurred. Among its properties, the propertyName is crucial for identifying which CSS property triggered a particular transition event. This property is especially useful when multiple properties are transitioning on an element, allowing you to handle them separately based on which transition has completed. This article will delve into the details of the propertyName property, demonstrating its syntax, use cases, and practical applications with clear examples.

What is the `propertyName` Property?

The propertyName property of a TransitionEvent object returns a string that represents the name of the CSS property that has transitioned. This property allows developers to target specific transitions, making your JavaScript code more precise and effective. The transitionend event, which fires when a CSS transition has completed, carries a TransitionEvent object. By inspecting the propertyName, you can determine which CSS property’s transition triggered the event.

Purpose of the `propertyName` Property

The core purpose of the propertyName property is to allow developers to:

Identify specific transitions: Determine which CSS property caused the transition event.
Handle multiple transitions: Manage different transitions on the same element individually.
Create dynamic effects: Implement logic that reacts differently based on the transitioned property.
Enhance interactivity: Build more sophisticated user interfaces with fine-grained control over transitions.

Syntax of `propertyName`

The propertyName property is accessed directly from a TransitionEvent object, which is provided as an argument to the event listener function:

element.addEventListener('transitionend', function(event) {
  const transitionedProperty = event.propertyName;
  console.log(transitionedProperty); // Output: The name of the transitioned property (e.g., "opacity", "width")
});

Here, event is the TransitionEvent object, and event.propertyName gives the name of the CSS property that finished transitioning.

Practical Examples of `propertyName`

Let’s explore several examples to demonstrate how to use the propertyName property effectively.

Example 1: Basic Property Identification

In this example, we will transition both the opacity and transform properties of a div and log the transitioned property.

<div id="transitionDiv1" style="width: 100px; height: 100px; background-color: lightblue; transition: opacity 1s, transform 1s;"></div>

<button id="transitionButton1">Start Transition</button>

<p id="transitionLog1"></p>

<script>
    const div1 = document.getElementById('transitionDiv1');
    const button1 = document.getElementById('transitionButton1');
    const log1 = document.getElementById('transitionLog1');

    button1.addEventListener('click', () => {
        div1.style.opacity = 0.5;
        div1.style.transform = 'translateX(50px)';
    });

    div1.addEventListener('transitionend', (event) => {
        const propertyName = event.propertyName;
        log1.textContent += `Transition ended for: ${propertyName}  |  `;
    });
</script>

Output:

Click the “Start Transition” button. After the transition completes, the log below the button will indicate the order of property transition like this (order may vary):
“Transition ended for: opacity | Transition ended for: transform | “

Example 2: Handling Specific Transitions

Here, we’ll demonstrate how to respond differently depending on the property that has transitioned.

<div id="transitionDiv2" style="width: 100px; height: 100px; background-color: lightgreen; transition: width 1s, height 1s;"></div>
<button id="transitionButton2">Start Transition</button>
<p id="transitionLog2"></p>

<script>
  const div2 = document.getElementById('transitionDiv2');
  const button2 = document.getElementById('transitionButton2');
  const log2 = document.getElementById('transitionLog2');

  button2.addEventListener('click', () => {
    div2.style.width = '200px';
    div2.style.height = '150px';
  });

  div2.addEventListener('transitionend', (event) => {
    const propertyName = event.propertyName;
    if (propertyName === 'width') {
      log2.textContent += "Width transition ended. | ";
    } else if (propertyName === 'height') {
      log2.textContent += "Height transition ended. | ";
    }
  });
</script>

Output:

Click the “Start Transition” button. After the transition completes, the log below the button will display specific messages based on which property finished its transition.
“Width transition ended. | Height transition ended. |”

Example 3: Chaining Transitions

This example shows how to use propertyName to trigger another transition when one transition ends, creating a chain of animations.

<div id="transitionDiv3" style="width: 100px; height: 100px; background-color: lightcoral; transition: width 0.5s;"></div>
<button id="transitionButton3">Start Transition</button>
<p id="transitionLog3"></p>

<script>
  const div3 = document.getElementById('transitionDiv3');
  const button3 = document.getElementById('transitionButton3');
   const log3 = document.getElementById('transitionLog3');

  let secondTransitionStarted = false;

  button3.addEventListener('click', () => {
      div3.style.width = '200px';
  });

  div3.addEventListener('transitionend', (event) => {
      if (event.propertyName === 'width' && !secondTransitionStarted) {
          div3.style.backgroundColor = 'lightblue';
           div3.style.transition = 'background-color 0.5s';
          secondTransitionStarted = true;
          log3.textContent += 'Width transition ended. | ';
       }
        else if (event.propertyName === 'background-color') {
           log3.textContent += 'Background transition ended. | ';
       }
  });
</script>

Output:

Click the “Start Transition” button. The div will first transition its width, then when that completes, it starts to change color. The log below the button will show these transitions.
“Width transition ended. | Background transition ended. |”

Key Takeaways

The propertyName property is essential for identifying which CSS property triggered a transition.
It is part of the TransitionEvent object, which is passed to the transitionend event listener.
You can use propertyName to manage multiple transitions on the same element.
This property is useful for chaining transitions or triggering different actions based on the transitioned property.

Browser Support

The propertyName property is widely supported across all modern browsers. This means you can reliably use it in your web development projects without needing to worry about browser compatibility issues.

Note: While support is excellent, always test your implementations across multiple browsers to ensure a consistent user experience. 🧐

Conclusion

The TransitionEvent propertyName property is a crucial tool for developers working with CSS transitions in JavaScript. It allows for precise control and more sophisticated animations, making your web applications more dynamic and responsive. Understanding how to use this property effectively can greatly enhance your ability to create engaging user interfaces. By using the examples provided and experimenting further, you can unlock the full potential of CSS transitions with JavaScript. 🎉