Question

我有这个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>

正如您所看到的，有两个样式表链接到此页面。

样式表代码

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

动画代码

.box-anim-start {
}

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

这是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)";

我想要的是打开此页面时的动画。并且，由于在css中提到了延迟，我认为这会起作用。但事实并非如此。你能解释一下原因吗？

Answer 1

使用关键帧在CSS中定义CSS动画更有意义，然后可以在页面加载后通过向框中添加类来调用它。

所以最初删除foreach类

.box-anim-start

然后使用关键帧定义动画：

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

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

中调用动画

.box-anim-start

最后在使用jQuery加载页面后添加类

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

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

Answer 2

最好的方法是使用样式表。

例如，在Chrome中，您的行：

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

错误，因为规则为空。发生这种情况是因为您需要将索引更改为

var sheet = document.styleSheets [0]; //而不是我的情况下的1

但考虑在两次过渡之间加上延迟。

相反，如果你想简单地使用你的风格的js：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用JavaScript触发CSS动画

2 个答案: