使用JavaScript触发CSS动画

Question

I have this html 我有这个HTML

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link href="StyleSheet.css" rel="stylesheet" />
        <link href="animation.css" rel="stylesheet" />
        <meta charset="utf-8" />
    </head>
    <body>
    <div class="box box-anim-start box-anim-end"></div>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="JavaScript.js"></script>
</body>
</html>

As you can see there are two stylesheets linked to this page. 如您所见，有两个样式表链接到此页面。

StyleSheet code StyleSheet代码

.box {
    height: 100px;
    width: 100px;
    background-color: red;
}

animation code 动画代码

.box-anim-start {
}

.box-anim-end {
    transition-property: transform;
    transition-duration: 2s;
    transition-delay: 5s;
}

And here's the JavaScript code 这是JavaScript代码

var box = $(".box").eq(0);
var sheet = document.styleSheets[1];
var rules = sheet.cssRules || sheet.rules;
var rule0 = rules[0];
rule0.style.transform = "translateX(100px)";
var rule1 = rules[1];
rule1.style.transform = "translateX(0px)";

What I wanted was an animation upon opening this page. 我想要的是打开此页面时的动画。 And, since the delay is mentioned in css, i thought that would work. 并且，由于在CSS中提到了延迟，因此我认为这会起作用。 But it didn't. 但事实并非如此。 Could you explain why? 你能解释为什么吗？

Answer 1

It's makes a lot more sense to define your CSS animation in your CSS using keyframes, you can then call it in by adding a class to your box once the page has loaded. 使用关键帧在CSS中定义CSS动画更为有意义，然后您可以通过在页面加载后将一个类添加到框中来调用它。

So initially remove the .box-anim-start class 因此，首先删除.box-anim-start类

<div class="box"></div>

Then define the animation using keyframes: 然后使用关键帧定义动画：

@keyframes slide {
  0%{ 
    transform: translate(0, 0)
  }
  100% { 
    transform: translate(100px, 0)
  }
}

Then call the animation within .box-anim-start 然后在.box-anim-start调用动画

.box-anim-start {
  animation: slide ease-in 2s;
  animation-delay: 2s;
}

.box{
  transition: 2s ease-in;
}

And finally add the class once the page has loaded using jQuery 最后使用页面加载页面后添加类

$(document).ready(function){
   $('.box').addClass('.box-anim-start');
});

Answer 2

The best way is to use the stylesheet. 最好的方法是使用样式表。

In Chrome, for instance, your line: 例如，在Chrome中，您的代码行：

var rules = sheet.cssRules || sheet.rules;

is wrong because rules is null. 是错误的，因为规则为空。 This happens because you need to change the index to 发生这种情况是因为您需要将索引更改为

var sheet = document.styleSheets[0]; var sheet = document.styleSheets [0]; // instead of 1 in my case //而不是1

But consider to put a delay between the two transition. 但是请考虑在两个过渡之间放置一个延迟。

Instead, if you want simply use the js with your styles you can do: 相反，如果您只想在样式中使用js，则可以执行以下操作：

 $(function () { $('div.box').css('transform', 'translateX(100px)').delay(3000).queue(function (next) { $(this).css('transform', 'translateX(0px)'); next(); }); });

 .box { height: 100px; width: 100px; background-color: red; } .box-anim-start { } .box-anim-end { transition-property: transform; transition-duration: 1s; transition-delay: 2s; }

 <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <div class="box box-anim-start box-anim-end"></div>

使用JavaScript触发CSS动画

问题描述

2 个解决方案

解决方案1
2 2016-01-08 15:28:33

解决方案2
0 2016-01-08 15:34:47

使用JavaScript触发CSS动画

问题描述

2 个解决方案

解决方案1 2 2016-01-08 15:28:33

解决方案2 0 2016-01-08 15:34:47

解决方案1
2 2016-01-08 15:28:33

解决方案2
0 2016-01-08 15:34:47