效果如图,鼠标移入某个盒子,该盒子实现放大效果。
获取用ref,放大效果transform:scale(),放大速度transition
<div class="home">
<router-link :to="item.url" v-for="(item, i) in list" :key="i">
<div
class="box"
ref="aaa"
@mousemove="inFun(i)"
@mouseleave="outFun(i)"
>
<div>{{ item.oneCon }}</div>
<div>{{ item.twoCon }}</div>
</div>
</router-link>
</div>
methods: {
inFun(i) {
this.$refs.aaa[i].style.transform = "scale(1.2,1.2)";
this.$refs.aaa[i].style.transition = "0.3s";
},
outFun(i) {
this.$refs.aaa[i].style.transform = "scale(1,1)";
},
},