如何实现动画结束后保留样式？

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《如何实现动画结束后保留样式？》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

实现动画结束后保留样式

问题：

如何在 html 和 css 中实现动画执行后，保留动画后的样式，而不是回到动画执行前的初始状态？

解答：

通常情况下，动画结束后会回到初始状态，因为 css 动画默认执行完后会还原样式。要保留动画最后的样式，可以将动画结束的属性设置为初始属性：

• html 和 css 代码：

...
<style>
  .box {
    /* 初始属性（动画结束后的样式） */
    left: -70px;
    opacity: 1;
    transition: all 1s; /* 启用 css 过渡效果 */
  }
  ...
</style>
...

• javascript 代码：

$('.btn-out').click(function() {
  $('.box-out').addClass('out');
});

$('.btn-in').click(function() {
  $('.box-in').addClass('in');
});

在此，我们使用了 css 过渡效果，在动画执行期间平滑地改变元素的属性。通过将动画结束的样式设置为初始样式，并在 javascript 中触发动画，可以在动画结束后保留样式。

以上就是《如何实现动画结束后保留样式？》的详细内容，更多关于的资料请关注golang学习网公众号！