嘿，你知道animation啥时候被无效化嘛用JS修改animation属性，不起作用（无效）。运行中的动画改变ani

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

前言

在线音乐戳我呀！
音乐博客源码上线啦！
前几篇讲了Docker的安装部署，操作算是比较简单的，大家可以看看哈。（入门级）
开发过程中，我们遇到好的页面，要想一想能不能封装成我们的组件（非业务组件），这不，说曹操曹操到。
需要开发一个走马灯组件，来活了，开工。
接下来将分享封装走马灯组件遇到的有趣的问题，一五一十盘出。
Are you ready ？

怀念家乡味道 ~

用JS修改animation属性，不起作用

存在问题
还原场景
进行分析
- var
- 在JS鼠标移入移出事件中写上animation
- 在JS事件里面一个一个设置，看看有什么效果
解决方案
- 分析：运行中的动画改变animationtiming/keyframe被忽略是符合标准的。
- 解决：使用不同的动画设置不同的类，然后通过 .setAttribute 简单地切换类。
误区：动画animation只是动画，不会改变你原本的样子。

一、存在问题

用JS修改animation属性，不起作用（无效）。

下面我们分析为什么会存在该问题。

二、还原场景

页面中有一个走马灯，鼠标移过去走马灯组件，显示组件底下工具栏，移除隐藏工具栏。

鼠标移入显示，移出隐藏这只需要控制opacity属性即可，但要添加动画，最终选择使用animation属性；

移入：animation: fadeEnter 2s running;；

移出：animation: fadeLeave 2s running;

@-webkit-keyframes fadeLeave {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeEnter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

三、进行分析

但鼠标移入移除是JS事件，那如何告诉CSS呢？

有两种方案：

3.1 var

我可以通过setProperty方法去用于设置一个新的 CSS 属性，对变量进行赋值，在style中使用var()获取我们在行内设置的数据即可。

使用this.$refs.footTool.style.setProperty('-animationName','fadeLeave')；

在style里面animation: var(--animationName) 2s running；

就可以拿到他的值fadeLeave

但没有任何效果，f12上看确实是加上了animation，也确实是拿到值了。

3.2 在JS鼠标移入移出事件中写上animation

this.$refs.footTool.style.animation = isShow
       ? 'fadeEnter 2s infinite'
       : 'fadeLeave 2s infinite';

animation其实是一个简写，其实是由很多属性缩写在一起。

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

但在JS鼠标移入移出事件中写上animation这种方法也不起作用。

3.3 在JS事件里面一个一个设置，看看有什么效果（尝试中）

this.$refs.footTool.style['animation-name'] = 'fadeLeave';
this.$refs.footTool.style['animation-duration'] = '2s';
this.$refs.footTool.style['animation-iteration-count'] = '1';

但似乎还是不行。

四、解决方案

以上都失效，来吧，我们分析一下。

4.1 分析

w3c标准指定了动画运行过程中的行为：

Changing the values of animation properties while the animation 
is running has noeffectonthe amoun to ftime thatha selapseds incethe 
animation started runningi.e.once the animation isrunning,
update stoanimation-delay have noeffect.The remainder of the animation 
runsaccording to the new animation property values.

因此，运行中的动画改变animationtiming/keyframe被忽略是符合标准的。经确认，Chrome31和Firefox有LZ预期的行为（但背离了标准定义），但chrome38回归了标准。为了与其他浏览器保持一致，开发者已经打好patch，应该在下一版发布会修正。下一版浏览器的行为将和你的预期保持一致了。

综上：运行中的动画改变animationtiming/keyframe被忽略是符合标准的。

4.2 解决问题

使用不同的动画设置不同的类，然后通过 .setAttribute("class","classname") 简单地切换类。

// JS
isShowImageTool(isShow) {
    if (isShow) {
    	this.$refs.footTool.setAttribute('class', 'foot-tool fadeEnter');
    } else {
    	this.$refs.footTool.setAttribute('class', 'foot-tool fadeLeave');
    }
    this.$refs.footTool.style.opacity = isShow ? 1 : 0;
}

// css
.fadeEnter {
	animation: fadeEnter 1s 1;
}
.fadeLeave {
	animation: fadeLeave 1s 1;
}

这种思路就解决我们的问题了。

五、误区

动画animation只是动画，不会改变你原本的样子。

原本以为4.2 解决问题中的this.$refs.footTool.style.opacity = isShow ? 1 : 0;这段不需要加上，以为css的keyframes已经设置了opacity了，但动画开始到结束确实是透明度有所变化，但播放完成后又恢复原本样子，所以还是得加上。

六、小知识

animation-play-state 属性规定动画正在运行还是暂停。

在css中写上animation: fadeLeave 2s running;，在鼠标移入移出让动画启动、暂停。

this.$refs.footTool.style.animationPlayState = 'running';  // 动画动了

this.$refs.footTool.style.animationPlayState = 'paused';  // 动画停了

七、知识点

animation、setAttribute

后记

在前言中说到非业务组件，就想起前几天跟妹子讲解了非组件的含义。

🙋🏻‍♂️ 你看这用到一个，那边又用到一个，你把这抽成一个组件，给两处地方用。

🙋 妹子急了，才两处地方用到，有必要抽成组件吗？

🙋🏻‍♂️ 格局小了，妹子，现在是两处，以后就三处、四处、五处...

🙋 好吧，那我抽组件去了。

🙋🏻‍♂️ 过了半天，我问她抽好了没，说好了。

我看了一下，你这组件都含业务了啊，我不是让你抽业务组件，然而妹子好像不太能理解什么是非业务组件。

我解释道：你看看elementui，人家那种就叫非业务组件，在这个组件中不写业务的，业务都在调用该组件的父组件中去写业务逻辑。

记得写好，要整份说明文档出来，妹子又懵逼了，怎么写。

要是不懂的话，你可以看我抽组件是怎么写文档的，也可以看看elementui的组件文档。

牛顿曾经说过：如果说我看得比别人更远些，那是因为我站在巨人的肩膀上。（If I have seen further, it is by standing on the shoulders of giants.）

👍 如果对您有帮助，您的点赞是我前进的润滑剂。

以往推荐

项目中你不知道的Axios骚操作（手写核心原理、兼容性）

VuePress搭建项目组件文档

vue-typescript-admin-template后台管理系统

原文链接

juejin.cn/post/703543…

嘿，你知道animation啥时候被无效化嘛

前言