用JavaScript触发CSS动画_Javascript_Jquery_Html_Css

用JavaScript触发CSS动画

javascript jquery html css

用JavaScript触发CSS动画,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有这个html <!DOCTYPE html> <html> <head> <title></title> <link href="StyleSheet.css" rel="stylesheet" /> <link href="animation.css" rel="stylesheet" /> <meta chars

我有这个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中提到了延迟，我认为这会起作用。但事实并非如此。您能解释一下原因吗？

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

因此，首先删除

.box anim start

类

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

然后调用

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

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

最后，在使用jQuery加载页面后添加类
$(document).ready(function){
   $('.box').addClass('.box-anim-start');
});

最好的方法是使用样式表
例如，在Chrome中，您的产品线：
var rules = sheet.cssRules || sheet.rules;
.box{
高度：100px；
宽度：100px；
背景色：红色；
}
.box动画开始{
}
.盒子动画结束{
过渡性质：变换；
过渡时间：1s；
过渡延迟：2s；
}

为什么要通过JS修改样式表规则，而不是通过JS设置box anim end
类？@JohannesJander这只是一个示例，不是吗？值100px在我的实际程序中是动态的。即使我通过addclass添加类，也会发生同样的情况。但是动画是通过设置CSS类触发的。你有没有尝试过在CSS中使用translateX，并通过JS设置类？很可能我以前从未这样做过，你想改变什么？更容易创建多个关键帧动画，然后通过添加/删除不同的动画类来调用它们
var rules = sheet.cssRules || sheet.rules;