javascript - 转换事件监听器不执行

Question

我正在使用 javascript 进行转换。但我想在转换结束时将元素显示为无。我在元素上使用 addEventListener 但函数不执行。

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

以下代码片段演示了 transitionend 事件。所有详细信息均在代码片段中注释。

片段

// 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>