单击时刷新 CSS 动画

Posted 2023-03-06

【中文标题】单击时刷新 CSS 动画

【英文标题】：Refreshing a CSS animation on click

【发布时间】：2017-12-16 06:20:20

【问题描述】：

我正在尝试通过单击“旋转”标志来使框旋转 360°。我使用了 CSS3 关键帧动画并将 CSS 应用于 jQuery 函数，但标志只触发一次动画；第二次点击时不会旋转。

html：

<div id="box"></div>

<a class="activate">spin</a>

jQuery:

$(document).ready(function()
$(".activate").click(function() 
    $('#box').css(
        "-webkit-animation-name":"cycle",
        "-webkit-animation-duration":"2s",
        "-webkit-animation-iteration-count":"1",
        "-webkit-animation-fill-mode" : "forwards",

        "animation-name":"cycle",
        "animation-duration":"2s",
        "animation-iteration-count":"1",
        "animation-fill-mode" : "forwards",

        "-moz-animation-name":"cycle",
        "-moz-animation-duration":"2s",
        "-moz-animation-iteration-count":"1",
        "-moz-animation-fill-mode" : "forwards",
    );
);
);

CSS：

#box 
    width:100px;
    height:100px;
    background-color:black;
    margin-bottom:10px;


@-webkit-keyframes cycle 
    from -webkit-transform: rotate(0deg);
    to -webkit-transform: rotate(360deg);


@keyframes cycle 
    from transform: rotate(0deg);
    to transform: rotate(360deg);


@-moz-keyframes cycle 
    from -moz-transform: rotate(0deg);
    to -moz-transform: rotate(360deg);


.activate 
    margin-top:5px;
    padding:3px 5px;
    background-color:#333;
    color:#eee;
    cursor:pointer;

Here's my JSFiddle.

我翻遍了 ***，一无所获；我必须以这种方式使用 addClass 并触发 + 重置动画吗？

任何帮助将不胜感激！

【参考方案1】：

这是实现这一目标的最佳方法。

为动画制作活动类

#box.active 
    -webkit-animation-name: cycle;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-name: cycle;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -moz-animation-name: cycle;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;

并在每次动画结束后使用 JQuery 删除活动类

$(document).ready(function() 
    $(".activate").click(function() 
        $('#box').addClass('active');
        $('#box').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function()
        $(this).removeClass('active');
        );

    );
);

jsfiddle

【讨论】：

它就像一个魅力！非常感谢您的帮助！

【参考方案2】：

第二次没有动画是因为它已经定义了style。 在使用CSS 分配style 之前清除它。

由于某种原因，如果 style 立即删除并再次添加它不起作用，所以必须放一个 setTimeout。如果您在重新分配 style 之前放置 alert 事件，它将起作用。

$(document).ready(function()
  $(".activate").click(function() 

      // Find target element
      var targetElement = document.getElementById('box')

      // Remove style attribute to clear previous animation
      targetElement.removeAttribute('style');

      // setTimeout is used to fix unknown reason that needs a halt.
      // An 'alert' also makes it working
      setTimeout(function()

        // Use target element instead of finding element again by jQuery selector
        $( targetElement ).css(
            "-webkit-animation-name":"cycle",
            "-webkit-animation-duration":"2s",
            "-webkit-animation-iteration-count":"1",
            "-webkit-animation-fill-mode" : "forwards",

            "animation-name":"cycle",
            "animation-duration":"2s",
            "animation-iteration-count":"1",
            "animation-fill-mode" : "forwards",

            "-moz-animation-name":"cycle",
            "-moz-animation-duration":"2s",
            "-moz-animation-iteration-count":"1",
            "-moz-animation-fill-mode" : "forwards",
        );

      , 0);

  );
);

#box 
    width:100px;
    height:100px;
    background-color:black;
    margin-bottom:10px;


@-webkit-keyframes cycle 
    from -webkit-transform: rotate(0deg);
    to -webkit-transform: rotate(360deg);


@keyframes cycle 
    from transform: rotate(0deg);
    to transform: rotate(360deg);


@-moz-keyframes cycle 
    from -moz-transform: rotate(0deg);
    to -moz-transform: rotate(360deg);


.activate 
    margin-top:5px;
    padding:3px 5px;
    background-color:#333;
    color:#eee;
    cursor:pointer;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box"></div>

<a class="activate">spin</a>