Question

我正在使用CSS动画和jQuery实现一个段落。

单击时应用此CSS动画，然后返回原始文本。第二次单击时，动画不起作用。我必须刷新才能更新。

我想实现这个CSS的动画，这样我就不必在一次点击事件后刷新。

不必要的代码是缩写。这就是我到目前为止所做的：

$(document).ready(function(){
  $('#intro_bullet').click(function(){
     $('#intro span').addClass('animation');
  });
});

.animation {
  animation-name: color_change;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}


@-webkit-keyframes color_change {
  from { color: #333386; }
  to { color: white; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="intro_bullet">Intro</li>
</ul>

<div id="intro">
  <span>Paragraph about intro</span>
</div>

Answer 1

您必须首先删除该类，然后使用offsetWidth进行黑客攻击，您可以使用它来“重置”div，以便动画可以再次运行。 See here了解更多信息。

$(document).ready(function(){
    $('#intro_bullet').click(function(){
         $('#intro span').removeClass('animation');
         void $('#intro span')[0].offsetWidth;
         $('#intro span').addClass('animation');
    });
});

.animation {
    animation-name: color_change;
    animation-duration: 5s;
    animation-iteration-count: 2;
    animation-direction: alternate;
}


@keyframes color_change {
    from { color: yellow;}
    to { color: royalblue;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li id="intro_title">Intro</li>
    <li id="intro_bullet">Click here</li>
</ul>

<div id="intro">
    <span>Paragraph about intro</span>
</div>

Answer 2

尝试：

animation-iteration-count: infinite;

如何在不刷新的情况下应用CSS动画

2 个答案: