Question

我正在使用javascript处理转换。但是我希望在转换结束时将元素显示为无。我在元素上使用addEventListener但函数没有执行。

＆＃13;

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';
        } );



    };




})();

＆＃13;

*{
    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;

}

＆＃13;

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

＆＃13;

Answer 1

使用＆＃34; transitionend＆＃34;没有前缀

#include <cs50.h>

#include "helpers.h"
#include <stdio.h>
/**
 * Returns true if value is in array of n values, else false.
 */
bool search(int value, int values[], int n)
{
    // TODO: implement a searching algorithm
    return false;
}

/**
 * Sorts array of n values.
 */
void sort(int values[], int n)
{
    // TODO: implement an O(n^2) sorting algorithm
    int tmp = 0;
    int i = 0;
    bool swapped = false;
    bool sorted = false;

    for (int i = 0; i < n; i++)
    {
        printf("%i\n", values[i]);
    }

    while (!sorted)
    {
        //check if number on left is greater than number on right in sequential order of the array.
        if (values[i] > values[i+1])
        {
            tmp = values[i];
            values[i] = values[i+1];
            values[i+1] = tmp;
            swapped = true;
        }
        if (i >= n - 1)
        {
            if (!swapped)
            {
                //No swaps occured, meaning I can assume the list is sorted.
                for (int i = 0; i < n; i++)
                {
                    printf("%i\n", values[i]);
                }
                sorted = true;
                break;
            } else {
                //A swap occured on this pass through of the array.  Set the flag back to false for the next pass through, repeating until no swaps are detected.  (Meaning every number is in its proper place.)
                i = 0;
                swapped = false;
            }
        } else {
            i++;
        }
    }
}

Answer 2

您可以在支持的浏览器上收听transitionend事件。

我对您的代码进行了一些重新调整，并在您的按钮上添加了id标记。

请参阅下面的代码段

＆＃13;

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)

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 3

以下代码段演示transitionend事件。所有详细信息都在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>

转换事件监听器不会执行

3 个答案: