Element.animate()实现
<div id="app">
<button @click="startAmi">开始</button>
<p>{{msg}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
msg: "hello world"
},
methods: {
startAmi(el) {
el.target.animate([
{
offset: .2,
transform: "translateX(100px)",
color: "red"
},
{
offset: 1,
transform: "translateX(200px)",
color: "blue"
}
], {
duration: 1000,
fill: "forwards"
})
}
}
})
</script>
Element.animate(keyframes,options)
参数：
-
keyframes：关键帧对象数组，或一个关键帧对象，格式如下：
{ //设置当前帧的偏移（在动画中的那个阶段完成，就是CSS中定义动画时的百分比），且与其他关键帧对象之间必须升序排序 //取值在[0-1]之间 offset?: number | null, //给指定关键帧之间应用过渡效果 // 可选的值有 linear ease-in ease-out ease-in-out easing?:string, //解析元素的动画如何影响其基础属性值 //accumulate：累积到基础值 // add：被添加到与之组合的基础值（又名加法）中 // replace：覆盖它与组合的基础值：替换 composite?:"accumulate" | "add" | "auto" | "replace" //其它css样式 ...cssStyle } -
options：代表动画持续时间的整数（以毫秒为单位），或者一个配置对象，格式如下：
{ //动画延迟执行时间 delay?: number, direction?: PlaybackDirection, //动画完成时间 duration?: number, //动画随时间变化的速率 easing?: string, //动画结束后延迟的毫秒数。这主要用于根据另一个动画的结束时间对动画进行排序。默认值为 0。 endDelay?: number, //规定动画在等待状态和结束状态的样式 /* none 不改变默认行为。 forwards 向前填充模式，当动画完成后，保持最后一帧属性值。 backwards 向后填充模式，在delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 both 向前和向后填充模式都被应用。 */ fill?: "none" | "forwards" | "backwards" | "both", //描述动画应在迭代中的哪个点开始。例如，0.5 表示在第一次迭代的中途开始，设置此值后，具有 2 次迭代的动画将在第三次迭代中途结束。默认值为 0.0。 iterationStart?: number, //动画应重复的次数。默认值为 1 iterations?: number }
动画有返回值
动画的返回值可以进行动画的暂停、取消等操作
const an = el.target.animate([
{
offset: .5,
transform: "translateX(100px)",
color: "red",
easing:"linear"
},
{
offset: 1,
transform: "translateX(200px)",
color: "blue",
// fontSize:"26px",
composite:"replace"
}
], {
duration: 2000,
fill: "forwards"
})
//暂停动画
an.cancel()