<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，會導(dǎo)致.alarmIcon中的 animation 和 keyframe 中的動畫會添加一個唯一標(biāo)識，然后調(diào)用函數(shù)的時候 animation 是沒有對應(yīng)的標(biāo)識的。

解決辦法

將 keyframes 下的內(nèi)容放到 scoped 的外邊或者去掉 scoped

1.將 keyframes 下的內(nèi)容放到 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>

到此這篇關(guān)于vue中動態(tài)修改animation效果無效問題詳情的文章就介紹到這了,更多相關(guān)vue animation 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: