前言

本片文章主要是做一个小练习，通过Vue来制作一个风扇练习css动画。
上一篇文章主要是讲解了React实现的部分
React实现部分看这里–>

一、效果

二、代码分享

1、主体框架
“sass”: “^1.62.1”,
“vue”: “^3.2.47”

2、主要技术点
使用事件代理实现绑定多个方法。
使用animation实现动画效果
动态绑定动画样式

3、代码解析
页面结构：

• 结构比较简单，主要是一个容器content，圆心circle，圆盘底座base，扇叶列表容器item-list，扇叶item。
• 按钮列表容器btn-list，按钮button
• 这里需要注意的是与React不同的地方是，在扇叶直接绑定号animation动画模板，才会在修改数据时实现响应式

<div v-for="item in itemList" :key="item.id" className="item":style="{ animation: `identifier reverse linear ${speed}s infinite` }"
>
</div>

<template><div className="content"><div className="circle"></div><div className="base" :style="{ animation: `shakeHead linear ${shakeValue}s infinite alternate` }"><div className="item-list"><div v-for="item in itemList" :key="item.id" className="item":style="{ animation: `identifier reverse linear ${speed}s infinite` }"></div></div></div><div className="btn-list" @click="onChangeSpeed($event.target.dataset)"><button v-for="item in btnList" :key="item.id" :data-speedchange="item.dataSpeedchange":data-action="item.dataAction">{{ item.btnName }}</button></div></div>
</template>

代理方法处理：

• 我们知道事件代理的实现技巧，也知道他的好处，但这里使用事件代理只是为了学习，毕竟现在的电脑配置，这些按钮绑定方法所使用的小号可以忽略不计。
• 事件代理通过利用事件冒泡机制，将事件处理程序委托给父元素处理，从而避免了在子元素上单独绑定事件处理程序的麻烦
• 通过元素所绑定的dataset来获取不同的action和参数。

const shakeValue = ref(0)
const speed = ref(0)
const onChangeSpeed = (value) => {console.log(value)let { action, speedchange } = valueconsole.log(speed.value)switch (action) {case 'open':speedchange = speed.value ? speed.value : speedchangespeed.value = speedchangebreak;case 'close':speedchange = 0speed.value = speedchangeshakeValue.value = speedchangebreak;case 'change':speedchange = speed ? speedchange : 0speed.value = speedchangebreak;case 'shake':if (speed && shakeValue.value) {shakeValue.value = 0} else if (speed) {shakeValue.value = speedchange}break;default:break;}
}

数据配置：
这里主要是为了配置dataset用的参数配置

const btnList = [{id: 1,dataSpeedchange: '3',dataAction: 'change',btnName: '1'},{id: 2,dataSpeedchange: '2',dataAction: 'change',btnName: '2'},{id: 3,dataSpeedchange: '1',dataAction: 'change',btnName: '3'},{id: 4,dataSpeedchange: '3',dataAction: 'open',btnName: 'open'},{id: 5,dataSpeedchange: '0',dataAction: 'close',btnName: 'close'},{id: 6,dataSpeedchange: '7',dataAction: 'shake',btnName: 'shake'},
]
const itemList = [{id: 1},{id: 2},{id: 3},{id: 4}
]

动画效果实现：
1、扇叶转动比较简单直接用transform: rotateZ(-360deg);这个就可以实现。
2、相对复杂一点的是摇头的效果，3d动画效果，所以需要用到3d属性rotate3d
3、主要keyframes动画

@keyframes identifier {to {transform: rotateZ(-360deg);}
}@keyframes shakeHead {0% {transform: rotate3d(0, 1, 0, 45deg);}50% {transform: rotate3d(0, -1, 0, 45deg);}100% {transform: rotate3d(0, 1, 0, 45deg);}
}

这里说说摇头的动画

• 0，1，0表示y轴的正方向旋转
• 0，-1，0表示y轴的负方向旋转
• 最后的0，1，0恢复。

那么我们怎么验证看看网页中的坐标轴是什么样的呢：
写个小dome看一下：
可以用xyz分别在控制旋转看看效果，得出的结论

transform: rotateX(45deg);
transform: rotateZ(45deg);
transform: rotateY(45deg);

这里的z轴是垂直指向屏幕外的方向。