jquery - 在 JQuery .css() 中使用 CSS3 过渡和关键帧

Question

我正在尝试让 CSS3 转换在 JQuery .css() 中工作

简单的东西

.someDiv { opacity: 1; background: #fff; transition: width 2s; }

格式化成

$( ".box" ).one( "click", function() {
$(this).css({ "opacity": "1", "background": "#fff", "transition": "width 2s" });
});

我知道的就这么多。
但是如何格式化具有嵌套关键帧的 CSS3 过渡以与 JQuery 一起使用？

.fadeInDown {
 -webkit-animation-name: fadeInDown;  
 animation-name: fadeInDown;  }

@keyframes fadeInDown {

0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
     transform: translate3d(0, -100%, 0);
    }

100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
} 

Answer 1

不要在这件事上耽误我。

没那么简单。请考虑以下事项:

jQuery has a very nice built in $(selector).animate() function which allows for easy setup of these animations. However, jQuery's animate() does not support multiple keyframes

话虽如此，您可以包含 jQuery.Keyframes图书馆将帮助您实现您想要的。

只需使用您提供的代码，您就可以通过 jQuery 引入动画 - 假设您添加了 jQuery.Keyframes - 像这样:

$.keyframe.define([{
  name: 'animation-name',
  '0%': {
    'opacity': '0',
    'transform': 'translate3d(0, -100%, 0)'
  },
  '100%': {
    'opacity': '1',
    'transform': 'none'
  }
}]);