关于函数和动画开始/动画结束事件的jQuery问题

Issue with jQuery on function and animationstart/animationend events

本文关键字：动画 结束 事件 问题 jQuery 开始 函数 于函数      更新时间：2023-09-26

我正在尝试制作一些在web-kit浏览器上使用的3D动画，以在其他浏览器上使用。

首先，我对css进行了一点更改，使其对其他浏览器也有效（我知道一些css规则仅适用于最新版本的浏览器，例如IE）：

.container
  -webkit-transform-style: preserve-3d
  transform-style: preserve-3d
.front
  -webkit-backface-visibility: hidden
  backface-visibility: hidden
.back
  -webkit-backface-visibility: hidden
  backface-visibility: hidden
  -webkit-transform: rotate3d(1, 0, 0, -180deg)
  transform: rotate3d(1, 0, 0, -180deg)
.show .container
  -webkit-animation: test 1s ease-in-out forwards
  -moz-animation: test 1s ease-in-out forwards
  -o-animation: test 1s ease-in-out forwards
  animation: test 1s ease-in-out forwards
@-webkit-keyframes test
  0%
    -webkit-transform: rotate3d(1, 0, 0, 0)
  100%
    -webkit-transform: rotate3d(1, 0, 0, -180deg)
@keyframes test
  0%
    -moz-transition: rotate3d(1, 0, 0, 0)
    -o-transition: rotate3d(1, 0, 0, 0)
    transition: rotate3d(1, 0, 0, 0)
  100%
    -moz-transition: rotate3d(1, 0, 0, -180deg)
    -o-transition: rotate3d(1, 0, 0, -180deg)
    transition: rotate3d(1, 0, 0, -180deg)

我知道css可能什么都不说——我只是展示我添加的内容，使其对非webkit浏览器也有效。

我的动画在Ubuntu 13.10上的Firefox 28上不起作用。我发现动画开始事件上的代码绑定没有执行：

this.testElement.on({
                    'animationstart webkitAnimationStart oAnimationStart MSAnimationStart': $.proxy(function(){
                     ....
                    }, this),
                    'animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd':  $.proxy(function(){
                     ....
                    }, this)
                });

正如我所说，动画在Chrome中工作，但在非web-kit系列的浏览器中不工作。由于我正在处理本文中的动画开始和结束事件，我想我的css有问题。

有人能建议我该怎么做吗？

关键帧规则不能混合特定于供应商的样式所有内容必须对特定浏览器有效。

所以，

@keyframes test
  0%
    -moz-transition: rotate3d(1, 0, 0, 0)
    -o-transition: rotate3d(1, 0, 0, 0)
    transition: rotate3d(1, 0, 0, 0)
  100%
    -moz-transition: rotate3d(1, 0, 0, -180deg)
    -o-transition: rotate3d(1, 0, 0, -180deg)
    transition: rotate3d(1, 0, 0, -180deg)

无效。用3种不同的规则写

@keyframes test {
    0% { transition: rotate3d(1, 0, 0, 0) }
  100% { transition: rotate3d(1, 0, 0, -180deg) }
}

等等

事件绑定将稍后出现，一旦您的动画工作：-）

相关文章：