【css3】js条件下多次触发同一个css3动画的解决方案

来源：互联网发布：手机淘宝支付宝登陆编辑：程序博客网时间：2024/06/11 02:18

本文适用于非循环播放动画，而是条件下触发播放动画的解决方案

通常，我们会写一个css3的动画作为一个样式，在需要播放动画的时候把样式加到元素上播放一次

如果需要多次触发播放动画，如果是使用将样式先去掉再马上加上的办法，将无法多次播放动画

这里介绍一下解决方案

<html><head><meta charset="utf8" /><meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>Animation Test</title><style>html,body,div,p{margin: 0;padding: 0;}.icon-wrap{position: relative;display: flex;width: 80px;height: 40px;align-items: center;justify-content: center;background-color: #000;}.icon{width: 14px;height: 12px;}.animation-icon{position: absolute;width: 14px;height: 12px;position: absolute;top: 50%;left: 50%;margin-left: -7px;margin-top: -6px;opacity: 0;}@keyframes animation1 {0%   {transform: scale(1.4);opacity: 0;}50%  {transform: scale(2.8);opacity: 1;}100%  {transform: scale(1);opacity: 0;}}.animation1 {animation: animation1 400ms linear;}@keyframes animation2 {0%   {transform: scale(1.4);opacity: 0;}50%  {transform: scale(2.8);opacity: 1;}100%  {transform: scale(1);opacity: 0;}}.animation2 {animation: animation2 400ms linear;}</style></head><body><a class="icon-wrap" id="J_animation_btn"><img class="animation-icon" id="J_animation_icon" src="icon-like-yellow.svg"><img class="icon" src="icon-like-white.svg">    </a><script>window.onload = function(){var btn = document.getElementById('J_animation_btn');var ani_icon = document.getElementById('J_animation_icon');var ani_status = 0;btn.addEventListener('click', function(){/*ani_icon.className = 'animation-icon';requestAnimationFrame(function(){ani_icon.className = 'animation-icon animation1';});*/if(ani_status == 1){ani_icon.className = 'animation-icon animation2';ani_status = 2;}else{ani_icon.className = 'animation-icon animation1';ani_status = 1;}});}</script></body></html>

这里的例子是一个框里有两个icon，一个显示（icon），一个是动画（animation-icon），

animation-icon，交替使用animation1和animation2来播放动画（注意animation1和animation2的keyframes和class样式都需要分开写（虽然是一抹一样的，但是要骗骗浏览器说这两个是不一样的动画，才能保证每次都触发））

可以看到代码中被注释掉的requestAnimationFrame这一段，思路是先把动画样式去掉，等渲染之后再把动画样式加上去，然而实践表明这个方法不可行（chrome上支持，但是ff上只能播放第一次的动画，所以还是用上面那个两个animation的办法吧）

想看效果的，这里传了压缩包可以下载查看：http://download.csdn.net/download/snow_finland/9984324

（压缩包里就多了两张图片，所以也可以随便找两个图片用上面的代码看效果）

阅读全文

0 0