CSS动画的暂停和继续：@click改变动画的animation-play-state

同事教我的，但他说是个笨方法，但我查了很久也没找到答案Orz...

我想要做一个唱片机，音乐播放时候唱片机旋转，音乐暂停唱片机也暂停，继续播放音乐，动画也从暂停的位置继续旋转.

//这是一个图片，她的style名字是animationState，要在data(){}里声明animationState哦
<image class="img" :style="animationState" src="../../static/css/image/audioBG3.png" mode="aspectFill"></image>


data() {
		return {
			animationState: '',
		};
	},

//这是图片的样式
.img {    
	width: 30vh;
	height: 30vh;
	align-self: center;
	border-radius: 50%;
    //来了来了，动画来了：以下是简写方法。[circle]是动画名,[30s]是动画持续时间,[linear]是让动画平缓的完成，因为我想做这个唱片机一样的效果，所以从头到尾都得一个速度哈 [infinite]：无限循环，就会让这个动画一直动23333                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
	animation: circle 30s linear infinite;
    border: 2px inset rgba($color: white, $alpha: 0.1);
}

//@keyframes 动画名{}就可以编辑动画了
@keyframes circle {
    //我做的是唱片机效果，需要这个图片360°的自转，直接来个100%的360°旋转就好了
    100% {
			transform: rotate(360deg);
	}
}

接下来就在播放按钮点击事件里，改变animationState就好了 

//HTML
<!-- 播放 -->
<text class="iconfont icon-zanting" @click="stop()"></text>
<!-- 暂停 -->
<text class="iconfont icon-bofang" @click="play()"></text>

//JS
methods: {
	play() {
        //如果想保持动画一个状态，暂停或一直播放，就直接写[animation-play-state:running/paused]在css里
	    this.animationState = 'animation-play-state:running';
	},
	stop() {
		this.animationState = 'animation-play-state:paused';
	},