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有一个非常好的内置$（选择器）.animate（）函数，可以轻松设置这些动画。但是，jQuery的animate（）不支持多个关键帧

话虽如此，你可以加入jQuery.Keyframes库来帮助你实现你想要的目标。

只需使用您提供的代码，您就可以通过添加dialog.CaptureFileAsync(CameraCaptureUIMode.Photo);的jQuery -given来介绍动画 - 如下所示：

＆＃13;

jQuery.Keyframes

＆＃13;

Answer 2

不确定为什么要使用jQuery添加关键帧，但是你可以像这样添加CSS到head：

＆＃13;

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

＆＃13;

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

＆＃13;

在JQuery .css（）中使用CSS3过渡和关键帧

2 个答案: