Question

我在css中设置了我的网站导航动画，问题就是这样。

 // Html file

       <html> 

        <div class="class-one">
        // some value
        </div>

        </html>

    // Css file

        .class-one {
        width: 100px
        height: 100px
        animation: first-animation paused 7s;
        animation: second-animation paused 7s;
        }

我控制每个动画播放jQuery时的行为，类似于此。

// Javascript file

 $(".class-one").click(function() {

    $(".class-one").css("animation-play-state", "running");

    });

我的问题是我无法指定我想要播放的动画，这只是播放第二个动画，而不是第一个动画。如何指定要播放的动画？

提前致谢!!

Answer 1

在CSS中，第二个动画属性声明覆盖了第一个。你需要两个班级：

// HTML
<body>
  <div class="element-in-question"></div>
</body>


// CSS
.class-one {
  width: 100px;
  height: 100px;
  animation: first-animation paused 7s;
}

.class-two {
  width: 100px;
  height: 100px;
  animation: second-animation paused 7s;
}

然后使用jQuery，您可以在元素上设置您希望看到的动画的类：

// jQuery    
if (condition) {

  // to set first-animation
  $('.element-in-question').addClass('class-one').removeClass('class-two');

} else if (otherCondition) {

  // to set second-animation
  $('.element-in-question').addClass('class-two').removeClass('class-one');
}

// trigger with your existing code
$('.element-in-question').css('animation-play-state', 'running');

如何在两个不同的CSS动画之间交替

1 个答案: