在 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 添加关键帧，但您可以像这样将 CSS 添加到 head：

$(function() {
  var keyframes = '.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;' +
                        '}' +
                    '}';
  $('<style type="text/css">' + keyframes + '</style>').appendTo($('head'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

不要在这上面耽误我。

没那么简单。考虑以下因素：

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

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

Using CSS3 Transitions and keyframes in JQuery .css()

css

jquery

transitions