Transition Event Listener führt nicht

Question

Ich arbeite an Übergängen mit Javascript. Aber ich möchte Element anzeigen, wenn der Übergang beendet ist. Ich verwende addEventListener auf Element, aber Funktion wird nicht ausgeführt.

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="EndBoundry">E</span> 
 
</div> 
 
<div class="btn"> 
 
<button onclick="fun()">Number Transition Click</button> 
 
</div>

Answer 1

Das folgende Snippet zeigt die transitionend Ereignis. Alle Details sind in Snippet kommentiert.

SNIPPET

// Reference the section#area and input#gone 
 
var area = document.getElementById('area'); 
 
var chx = document.getElementById('gone'); 
 

 
// Register click event on #area call offON() 
 
area.addEventListener('click', offON, false); 
 

 

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

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

 
    // If the checkbox is checked call transEND() 
 
    if (chx.checked) { 
 
    transEND() 
 
    } 
 
} 
 

 

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

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

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

/* All buttons will have the same 
 
|| transition. This transition is 
 
|| dependent upon another animatable 
 
|| style to exist. 
 
*/ 
 

 

 
/* This particular transition says: 
 
|| ALL animatable styles have a 
 
|| duration of 3 seconds, 
 
|| with a timing function: ease, 
 
|| and a delay of 300msec 
 
*/ 
 

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

 

 
/* Classes .on and .off are "states" 
 
|| to each #id the "states" have a 
 
|| different meaning 
 
*/ 
 

 
#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 push the buttons again. If you can't click the buttons back to original "state", then the event handler on transitionend was successful.</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

Use "transitionend" ohne Präfixe

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

Answer 3

können Sie hören Ereignis zu unterstützten Browsern transitionend.

Ich habe einige Ihrer Codes neu gemischt und fügen Sie einen id Tag zu Ihrer Schaltfläche hinzu.

Siehe Schnipsel unten

var fun; 
 
var i = 0, 
 
    containterget = 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(' + (containterget.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; 
 
} 
 

 
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="EndBoundry">E</span> 
 
</div> 
 
<div class="btn"> 
 
    <script></script> 
 
    <button id="target">Number Transition Click</button> 
 
</div>