<script setup>
import { ref, onMounted, watch } from 'vue'
// ----------------------- 01 js 动画介绍---------------------
// 1、匀速运动
// 2、缓动运动（常见）
// 3、透明度运动
// 4、多物体运动
// 5、多值动画// 6、自己的动画框架
// css3属性的transition 和 animation 可以实现运动window.onload = () => {// ----------------- 05 多物体动画 --------------------// 鼠标移入移出// 使用 querySelectorAll 获取所有的 .mul 元素const mulElements = boxDom4?.value?.querySelectorAll('.mul');for (let i = 0; i < mulElements.length; i++) {if (i === 0) {mulElements[i].onmouseover = () => {allBoxAnimation(mulElements[i], 'height', 300)}mulElements[i].onmouseout = () => {allBoxAnimation(mulElements[i], 'height', 150)}} else if (i === 1) {mulElements[i].onmouseover = () => {allBoxAnimation(mulElements[i], 'width', 600)}mulElements[i].onmouseout = () => {allBoxAnimation(mulElements[i], 'width', 300)}} else if (i === 2) {mulElements[i].onmouseover = () => {allBoxAnimation(mulElements[i], 'opacity', 30)}mulElements[i].onmouseout = () => {allBoxAnimation(mulElements[i], 'opacity', 100)}}}
}// ------------------05 多物体运动-------多值运动（添加形参attr)--------
const boxDom4 = ref(null)
let speed1 = 0
const allBoxAnimation = (dom, attr, endTarget) => {// 注意：针对于多物体运动，定时器的返回值要绑定当前的对象中。offsetWidth获取的是包括border的宽度,所以这里使用getComputed获取widthclearInterval(dom.timer)dom.timer = setInterval(() => {let cur = 0// 0 获取样式属性// 透明度变化处理if (attr === 'opacity') {// 求透明度的变化速度，注意！小数需要取整cur = Math.round(parseFloat(getStyle(dom, attr)) * 100)} else {// 获取dom宽度或高度等cur = parseInt(getStyle(dom, attr))}// 1、求速度speed1 = (endTarget - cur) / 20speed1 = endTarget > cur ? Math.ceil(speed1) : Math.floor(speed1)// 2、临界处理if (endTarget === cur) {clearInterval(dom.timer)return}// 3、运动起来if (attr === 'opacity') {dom.style[attr] = `alpha(opacity=${cur + speed1})`dom.style[attr] = (cur + speed1) / 100} else {dom.style[attr] = cur + speed1 + 'px'}}, 30)
}// dom 是对象, attr 是什么属性
// 获取元素属性的方法
const getStyle = (dom, attr) => {if (dom.currentStyle) {// 针对IE浏览器return dom.currentStyle[attr]} else {// 针对 Firefox浏览器return getComputedStyle(dom, null)[attr]}
}onMounted(() => {
})
</script><template><div class="main"><!-- 05多物体运动 --><div id="box4" ref="boxDom4"><div class="mul"></div><div class="mul"></div><div class="mul"></div></div></div></template><style scoped lang="less">
.main {display: flex;flex-direction: column;// 多物体运动#box4 {.mul {width: 300px;height: 50px;background-color: rgb(111, 60, 253);margin: 20px 0;border: 4px solid #000;}}
}
</style>