vue中动态修改animation效果无效问题

问题描述

<template>
	<div
		class="alarmIcon"
		ref="alarmIcon"
		@mouseenter="handleEnter"
		@mouseleave="handleLeave"
	></div>
</template>
<script>
export default(){
  mounted(){

  },
  methods:{
    handleEnter(){
      this.$refs['alarmIcon'].style.animation = 'blink 1s inifnite'
    },
    handleLeave(){
      this.$refs['alarmIcon'].style.animation = 'noBlink 1s inifnite'
    }
  }
}
</script>

<style scoped>
.alarmIcon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	transform: translate3d(-50%, -50%, 0);
	background: #008c8c;
	animation: noBlink 1s inifinite;
}
@keyframes blink {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes noBlink {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
</style>

鼠标移入移出，并没有出现闪动

问题原因

样式中添加了 scoped，会导致.alarmIcon中的 animation 和 keyframe 中的动画会添加一个唯一标识，然后调用函数的时候 animation 是没有对应的标识的。

解决办法

将 keyframes 下的内容放到 scoped 的外边或者去掉 scoped

1.将 keyframes 下的内容放到 scoped 的外边

<style scoped>
.alarmIcon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	transform: translate3d(-50%, -50%, 0);
	background: #008c8c;
	animation: noBlink 1s inifinite;
}
</style>
<style>
@keyframes blink {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes noBlink {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
</style>

2.去掉scoped

<style>
.alarmIcon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	transform: translate3d(-50%, -50%, 0);
	background: #008c8c;
	animation: noBlink 1s inifinite;
}
@keyframes blink {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes noBlink {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
</style>