vue实现动画旋转(类名为a-round),文字不旋转 (类名为round-item)
鼠标移入实现动画的暂停,移出实现动画的运行
本实例为个人总结,转载请标明出处
<template>
<div>
<div class="a-content" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
<div class="a-left">
<ul class="a-round" :style="{'animation-play-state':animationShow}">
<li class="round-item" v-for="(item,index) in round" :key="item.id" :style="{top:item.pTop,'animation-play-state':animationShow}">
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
animationShow:""
}
},
methods: {
mouseEnter() {
this.animationShow="paused"
},