javascript - addEventListener ("transitionend"问题，功能，真)

Question

我正在编写一个简单的函数来使用 css3 和 javascript 产生持续的效果，但我没有让它正常工作。 addEventListener() 不遵守 transitionend 参数。这是我的代码。

首先我调用函数:

$('.tipsVi2, .tipsVi').mouseenter(function(){
            var e=$(this).attr('id');
            animacion(e);
            });

函数是:

function animacion(e) {
var el = updateTransition(e);
    el.addEventListener("transitionend", updateTransition(e), true);

最后是 updateTransition() 函数:

    function updateTransition(e) {  
var el = document.querySelector('#'+e);
  if (el.className=='tipsVi') {
    console.log('tipsVi2');
    el.className = "tipsVi2";
  } else {
    console.log('tipsVi');
    el = document.querySelector('div.tipsVi2');
    el.className = "tipsVi";
  }

  return el;
}

如您所见，我添加了一个 console.log 以查看发生了什么，控制台几乎立即给我“tipsVi2”和“tipsVi”，因此动画没有完成。

CSS代码是这样的:

.tipsVi{
position:absolute;
display:none;
z-index:3000;
cursor:default;
-moz-transition-property:margin;
-moz-transition-duration: 500ms;
-webkit-transition-property: margin;
-webkit-transition-duration: 500ms;
-o-transition-property: margin;
-o-transition-duration: 500ms;
margin:0;}
.tipsVi2 {
position:absolute;
display:none;
z-index:3000;
cursor:default;
-moz-transition-property:margin;
-moz-transition-duration: 500ms;
-webkit-transition-property: margin;
-webkit-transition-duration: 500ms;
-o-transition-property: margin;
-o-transition-duration: 500ms;
margin:-5px 0 0 0;  }

Answer 1

好的，我已经解决了更改代码的问题，我选择了纯 CSS 解决方案，尽管我使用 Javascript 来提高性能。

所以首先我将我的 CSS 代码更改为:

    .tipsVi{
    position:absolute;
    z-index:3000;
    cursor:default;
    display:none;
    color:#3d3d3d;
    font-size:30px;
}

 @-moz-keyframes slidein {
      from {
        margin-top:0;
      }



      50% {
          margin-top:-4px;
      }

      to {
        margin-top:0;
      }
    }

    @-webkit-keyframes slidein {
      from {
        margin-top:0;
      }

      50% {
          margin-top:-4px;
      }

      to {
        margin-top:0;
      }
    }

关键帧为我提供了一个带有循环的持续动画，这让我觉得它更简单。但我只想在按下按钮时显示动画，所以我这样做了:

function tipsVi(){

    //Help activated, 
    if(misTips==1){
        misTips=0;
        $('.tipsVi').fadeIn(150, function(){
            var css={'position':'absolute',
                    'z-index':'3000',
                    'cursor':'default',
                    'color':'#3d3d3d',
                    'font-size':'30px',
                    '-webkit-animation-direction':'normal',
                    '-moz-animation-direction': 'normal',
                    '-webkit-animation-duration': '800ms',
                    '-moz-animation-duration': '800ms',
                    '-webkit-animation-iteration-count': 'infinite',
                    '-moz-animation-iteration-count': 'infinite',
                    '-webkit-animation-name': 'slidein',
                    '-moz-animation-name': 'slidein',
                    '-webkit-animation-timing-function': 'ease',
                    '-moz-animation-timing-function': 'ease'};
            $('.tipsVi').css(css);
            });
    }
    //Tips apagados
    else{
        console.log('desactivada');
        $('.tipsVi).fadeOut(150, function(){
            var css={'position':'absolute',
                    'z-index':'3000',
                    'cursor':'default',
                    'display':'none',
                    'color':'#3d3d3d',
                    'font-size':'30px'};
        $('.tipsVi').css(css);
            });
        misTips=1;  
    }
}

这可能看起来有点复杂但很简单，一个按钮调用我的 tipsVi() 函数是这样的

<button onClick="javascript: tipsVi()">Help</button>

该函数有一个名为 misTips 的全局变量，因此当标志为 0 时，通过 jQuery 更改 css，因此它看起来像这样:

.tipsVi{
position:absolute;
z-index:3000;
cursor:default;
display:none;
color:#3d3d3d;
font-size:30px;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;

-webkit-animation-duration: 800ms;
-moz-animation-duration: 800ms;

-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;

-webkit-animation-name: slidein;
-moz-animation-name: slidein;

-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;

瞧，当 div 产生 fadeIn 效果时它开始上升和下降，当然 CPU 使用率上升所以当我再次按下按钮隐藏div，我还原了 css 以降低 CPU 使用率并提高性能。

我希望这对像我这样的人有帮助:)