加了定时器刷新还是会出现动画时有时无的现象
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html><br><htmllang="en"><br><head><br> <metacharset="UTF-8"><br> <metaname="viewport"content="width=device-width, initial-scale=1.0"><br> <title>封装形变类</title><br> <styletype="text/css"><br> .ball{<br> background: linear-gradient(#ff9b9b 50%,#106dbb 50%);<br> width:150px;<br> height: 150px;<br> border-radius: 50%;<br> }<br> </style><br></head><br><body><br> <divclass="ball"></div><br><br> <scripttype="text/javascript"src="index.js"></script><br></body><br></html><br>
class Transform {<br> _queue = [];<br> constructor(selector) {<br>this.el = document.querySelector(selector);<br>this.el.style.transition = `all ${ .3 }s`;<br>// this._queue = [];<br> }<br> // 位移<br> translate(value, time) {<br> return this._add('translate', value, time);<br> }<br> // 缩放<br> scale(value, time) {<br> return this._add('scale', value, time);<br><br> }<br> // 形变<br> rotate(value, time) {<br> return this._add('rotate', value, time);<br><br> }<br><br> // 添加动画<br> _add(type, value, time) {<br> this._queue.push({<br> type,<br> value,<br> time<br> })<br> return this;<br> }<br> //添加完成,启动<br> done() {<br> this._start();<br> }<br> // 启动 从队列中把动画拿出来执行<br> _start() {<br> setTimeout(() => {<br> const info = this._queue.shift();<br><br> this.el.style.transform = this._getTransform(info);<br> }, 0);<br><br> const info = this._queue.shift();<br><br> this.el.style.transform = this._getTransform(info);<br> }<br><br> _getTransform({<br> time,<br> value,<br> type<br> }) {<br> switch (type) {<br> case 'translate':<br> return `translate(${ value })`;<br> }<br> }<br><br>}<br>const tf = new Transform('.ball');<br><br>tf.translate(`100px,100px`)<br> .scale(2)<br> .done()<br><br>console.log(tf);<br>
13
收起
正在回答
1回答
同学你好，老师直接拿同学的代码测试，刷新多次，都是没有动画的，没有出现动画时有时无的情况。这是因为如下代码重复了， this._queue.shift()执行两次，那么就会变成一个空数组，里面没有动画了。把它注释了，就会有动画了：
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧