Transition event listener fails to trigger

Question

Transition event listener fails to trigger

I am currently experimenting with transitions using JavaScript. My goal is to hide an element when the transition ends. I have set up an event listener using addEventListener, but the function does not seem to be executing.

var fun;

var transitions = {
    'transition':'transitionend',
    'OTransition': 'oTransitionEnd',
    'MozTransition': 'transitionend',
    'WebkitTransition': 'webkitTransitionEnd'
};

(function() {


    var i=0,
        containterget = document.querySelector('.container');
        elementGet = document.querySelector('.Number');


    fun = function(){
        i++;
        elementGet.innerHTML = i;
        elementGet.style.transform = 'translateX('+(containterget.offsetWidth - 40 -35)+'px)';
        elementGet.addEventListener(transitions,function(event){

            console.log("Transition End Execute");
            elementGet.style.display='none';
        });
    };
})();

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.container{
    border:1px solid green;
    max-width:85%;
    margin: 2em auto 0;
}

button{
    background-color: transparent;
    padding: 15px;
    margin: 0;
    color: #000;
    border: 2px solid #F44336;
    text-align: center;
    outline: 0;
    transition: opacity 0.3s;
}

button:hover{
    background-color: #F44336;
    color: white;
    opacity: .75;
}

button:hover{
    cursor: pointer;
    transition: opacity .4s;
}

span{
    display: inline-block;
    transition: transform 1.5s ease;
}

.Number{
    font-size: 4em;
    border: 1px solid black;
    /*transform: translateX(0);*/
}

.EndBoundry{
    float: right;
    font-size: 4em;
    border: 1px solid black;
}

.contain:after{
    content: "";
    display: table;
    clear: both;
}

.btn{
    text-align: center;
    margin: 2em 0;
}

<div class="container contain">
    <span class="Number">1</span>
    <span class="EndBoundary">E</span>
</div>
<div class="btn">
<button onclick="fun()">Number Transition Click</button>
</div>

javascript css

Answer 1

Answer №1

Here is an example demonstrating the transitionend event. All explanations are provided within the code snippet.

CODE SNIPPET

// Get references to section#area and input#gone
var area = document.getElementById('area');
var chx = document.getElementById('gone');

// Add click event listener on #area calling offON()
area.addEventListener('click', offON, false);


function offON(e) {
  // Check which button was clicked 
  if (e.target !== e.currentTarget) {
    var tgt = e.target;

    // Toggle classes .on and .off of the clicked button
    tgt.classList.toggle('on');
    tgt.classList.toggle('off');
  }

  // Call transEND() function if checkbox is checked
  if (chx.checked) {
    transEND()
  }
}


function transEND() {
  // Add transitionend event listener on #area
  area.addEventListener("transitionend", function(e) {

    // Identify the clicked button
    if (e.target !== e.currentTarget) {
      var tgt = e.target;

      // Make clicked button disappear after transition
      tgt.style.display = 'none';
    }
  }, false);
}

/* All buttons have the same
|| transition effect. This transition depends on
|| another animatable style.
*/


/* The transition properties state:
|| ALL animatable styles will take
|| 3 seconds to animate,
|| with a timing function: ease,
|| and a delay of 300 milliseconds
*/

button {
  width: 120px;
  height: 40px;
  transition: all 3s ease .3s
}


/* Classes .on and .off represent
|| different states for each #id
*/

#fade.off {
  opacity: 1;
}

#fade.on {
  opacity: 0;
}

#move.off {
  transform: translateY(0);
}

#move.on {
  transform: translateY(200px);
}

#shrink.off {
  transform: scale(1);
}

#shrink.on {
  transform: scale(.3);
}

#gone {
  width: 18px;
  height: 18px;
}

p {
  font-size: 12px;
}

<p>Click each button. Then click them again (the "FADER" is still there and clickable)</p>
<p>Now click the checkbox and press the buttons again. If you cannot return the buttons to their original state, then the transitionend event handler has worked.</p>

<label for='gone'>Enable "transitionEND" </label>
<input id='gone' type='checkbox'>

<section id='area'>

  <button id='fade' class='off'>FADER</button>

  <button id='move' class='off'>MOVER</button>

  <button id='shrink' class='off'>SHRINKER</button>

</section>

Answer 2

Here is an example demonstrating the transitionend event. All explanations are provided within the code snippet.

CODE SNIPPET

// Get references to section#area and input#gone
var area = document.getElementById('area');
var chx = document.getElementById('gone');

// Add click event listener on #area calling offON()
area.addEventListener('click', offON, false);


function offON(e) {
  // Check which button was clicked 
  if (e.target !== e.currentTarget) {
    var tgt = e.target;

    // Toggle classes .on and .off of the clicked button
    tgt.classList.toggle('on');
    tgt.classList.toggle('off');
  }

  // Call transEND() function if checkbox is checked
  if (chx.checked) {
    transEND()
  }
}


function transEND() {
  // Add transitionend event listener on #area
  area.addEventListener("transitionend", function(e) {

    // Identify the clicked button
    if (e.target !== e.currentTarget) {
      var tgt = e.target;

      // Make clicked button disappear after transition
      tgt.style.display = 'none';
    }
  }, false);
}

/* All buttons have the same
|| transition effect. This transition depends on
|| another animatable style.
*/


/* The transition properties state:
|| ALL animatable styles will take
|| 3 seconds to animate,
|| with a timing function: ease,
|| and a delay of 300 milliseconds
*/

button {
  width: 120px;
  height: 40px;
  transition: all 3s ease .3s
}


/* Classes .on and .off represent
|| different states for each #id
*/

#fade.off {
  opacity: 1;
}

#fade.on {
  opacity: 0;
}

#move.off {
  transform: translateY(0);
}

#move.on {
  transform: translateY(200px);
}

#shrink.off {
  transform: scale(1);
}

#shrink.on {
  transform: scale(.3);
}

#gone {
  width: 18px;
  height: 18px;
}

p {
  font-size: 12px;
}

<p>Click each button. Then click them again (the "FADER" is still there and clickable)</p>
<p>Now click the checkbox and press the buttons again. If you cannot return the buttons to their original state, then the transitionend event handler has worked.</p>

<label for='gone'>Enable "transitionEND" </label>
<input id='gone' type='checkbox'>

<section id='area'>

  <button id='fade' class='off'>FADER</button>

  <button id='move' class='off'>MOVER</button>

  <button id='shrink' class='off'>SHRINKER</button>

</section>

Answer 3

Answer №2

Implement the "transitionend" event without any prefixes

elementGrab.addEventListener("transitionend", function(){});

Answer 4

Implement the "transitionend" event without any prefixes

elementGrab.addEventListener("transitionend", function(){});

Answer 5

Answer №3

To detect the end of a transition, you can listen for the 'transitionend' event on browsers that support it.

I made some adjustments to your code and included an id attribute to your button element.

Check out the code snippet below:


var fun;
var i = 0,
  containerGet = document.querySelector('.container');
elementGet = document.querySelector('.Number');
console.log(elementGet)

function execute(event) {

  console.log("Transition End Execute");
  alert("Transition End Execute");
  elementGet.style.display = 'none';
}
fun = function() {
  i++;
  elementGet.innerHTML = i;
  elementGet.style.transform = 'translateX(' + (containerGet.offsetWidth - 40 - 35) + 'px)';
  elementGet.addEventListener('transitionend', execute);
  elementGet.addEventListener('webkitTransitionEnd', execute);
  elementGet.addEventListener('mozTransitionEnd', execute);
  elementGet.addEventListener('oTransitionEnd', execute);

};

document.getElementById("target").addEventListener("click", fun)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  border: 1px solid green;
  max-width: 85%;
  margin: 2em auto 0;
}

button {
  background-color: transparent;
  padding: 15px;
  margin: 0;
  color: #000;
  border: 2px solid #F44336;
  text-align: center;
  outline: 0;
  transition: opacity 0.3s;
}
// CSS code continues...

<div class="container contain">
  <span class="Number">1</span>
  <span class="EndBoundry">E</span>
</div>
<div class="btn">
  <script></script>
  <button id="target">Number Transition Click</button>
</div>

Answer 6

To detect the end of a transition, you can listen for the 'transitionend' event on browsers that support it.

I made some adjustments to your code and included an id attribute to your button element.

Check out the code snippet below:


var fun;
var i = 0,
  containerGet = document.querySelector('.container');
elementGet = document.querySelector('.Number');
console.log(elementGet)

function execute(event) {

  console.log("Transition End Execute");
  alert("Transition End Execute");
  elementGet.style.display = 'none';
}
fun = function() {
  i++;
  elementGet.innerHTML = i;
  elementGet.style.transform = 'translateX(' + (containerGet.offsetWidth - 40 - 35) + 'px)';
  elementGet.addEventListener('transitionend', execute);
  elementGet.addEventListener('webkitTransitionEnd', execute);
  elementGet.addEventListener('mozTransitionEnd', execute);
  elementGet.addEventListener('oTransitionEnd', execute);

};

document.getElementById("target").addEventListener("click", fun)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  border: 1px solid green;
  max-width: 85%;
  margin: 2em auto 0;
}

button {
  background-color: transparent;
  padding: 15px;
  margin: 0;
  color: #000;
  border: 2px solid #F44336;
  text-align: center;
  outline: 0;
  transition: opacity 0.3s;
}
// CSS code continues...

<div class="container contain">
  <span class="Number">1</span>
  <span class="EndBoundry">E</span>
</div>
<div class="btn">
  <script></script>
  <button id="target">Number Transition Click</button>
</div>

Transition event listener fails to trigger

Answer №1

Answer №2

Answer №3

Similar questions

How can we verify in enzyme that the history.push method was called while utilizing withRouter and connect?

A step-by-step guide on recursively removing all empty array children [] from a nested JSON structure

Animated smooth updates in d3 line graphs are the key to creating dynamic and

Webdriverio: exploring the window object

How to retrieve the $0 element using Python Selenium

My website built with the Celia template from Envato is loading slowly. It is taking longer than anticipated to load all the content

Issues encountered while converting scss to css with gulp

What is the best way to ensure PyScript is completely initialized, including the environment?

Retrieve the chosen language while utilizing the $translate feature

Square Power Box

Converting an rrule date value from an array to a customized string format

Tally Every Number Encountered Within the Blog Archive

The React.js Redux reducer fails to add the item to the state

"Utilizing a custom CSS style for a half heart rating system

Is the ng bootstrap modal within Angular failing to show up on the screen

Using React to retrieve information from an array stored in the state

Utilizing a try/catch block for validating a JSON file is ineffective

Tips for fetching integer numbers in a string in JavaScript in sequential order starting from the left side

Create a Rest API and implement server-side rendering concurrently using SailsJs

What is the best way to assign a value to a JSTL variable using JavaScript?