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>

到此这篇关于vue中动态修改animation效果无效问题详情的文章就介绍到这了,更多相关vue animation 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

  • vue+animation动画实现跑马灯效果
  • Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
  • 详解vue中使用transition和animation的实例代码
  • vue+animation实现翻页动画
  • Vue中使用create-keyframe-animation与动画钩子完成复杂动画
张贴在2