Mozilla动画套件不工作 [英] Mozilla Animation Kit not working

问题描述

我试图动画元素，使其出现在按钮点击。
下面的代码在Chrome中工作得很好，但不适用于Mozilla Firefox。

动画的CSS类：

  .moz-trial {
 -moz-animation：moz-trial 2s; 
 -webkit-animation：moz-trial 1s; 
} 
 
 @ -webkit-keyframes moz-trial {
 
 0％{
 opacity：0; 
 -moz-transform：translateX（-20px）; 
 -webkit-transform：translateX（-20px）; 
} 
 50％{
 opacity：0.8; 
 -moz-transform：translateX（+ 20px）; 
 -webkit-transform：translateX（+ 20px）; 
} 
 100％{
 opacity：1; 
 -moz-transform：translateX（0px）; 
 -webkit-transform：translateX（0px）; 
} 
} 
  

我的JS代码点击按钮：

  $（'＃open_drawer'）。on（'click'，function（）{
 $（'＃questions_menu_drawer'）。 removeClass（'hidden'）。addClass（'moz-trial'）; 
}）; 
  

示例 - http://jsfiddle.net/88ogrojy/

解决方案

您需要在代码中添加以下内容。

检查这两个我测试过的fiddles

FIDDLE 1 FIDDLE 2

  @keyframes moz-trial {
 0％{
 opacity：0; 
 -moz-transform：translateX（-20px）; 
 transform：translateX（-20px）; 
} 
 50％{
 opacity：0.8; 
 -moz-transform：translateX（+ 20px）; 
 transform：translateX（+ 20px）; 
} 
 100％{
 opacity：1; 
 -moz-transform：translateX（0px）; 
 transform：translateX（0px）; 
} 
} 
  

I am trying to animate an element and make it appear on button click. The below code works perfectly fine in Chrome, but doesn't work for Mozilla Firefox. Any help is greatly appreciated.

Thanks

CSS Class for animation:

.moz-trial{
   -moz-animation:moz-trial 2s;
   -webkit-animation: moz-trial 1s;
 }

 @-webkit-keyframes moz-trial {

 0%   {
  opacity: 0;
  -moz-transform: translateX(-20px);
  -webkit-transform: translateX(-20px);
}
50%   {
  opacity: 0.8;
  -moz-transform: translateX(+20px);
  -webkit-transform: translateX(+20px);
}
100%   {
  opacity: 1;
  -moz-transform: translateX(0px);
  -webkit-transform: translateX(0px);
}
}

My JS code on button click:

$('#open_drawer').on('click',function(){    
   $('#questions_menu_drawer').removeClass('hidden').addClass('moz-trial');
});

Example - http://jsfiddle.net/88ogrojy/

解决方案

You need to add following to your code.

Check this 2 fiddles i tested

FIDDLE 1 FIDDLE 2

@keyframes moz-trial {
    0% {
        opacity: 0;
        -moz-transform: translateX(-20px);
        transform: translateX(-20px);
    }
    50% {
        opacity: 0.8;
        -moz-transform: translateX(+20px);
        transform: translateX(+20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0px);
        transform: translateX(0px);
    }
}

这篇关于Mozilla动画套件不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！