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

目录
  • 问题描述
  • 问题原因
  • 解决办法
    • 1.将 keyframes 下的内容放到 scoped 的外边
    • 2.去掉scoped

问题描述

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

<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 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解vue中使用transition和animation的实例代码

    以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition:英文过渡的意思,作用是过渡效果:animation:英文活泼.生气.激励,动画片就是animation film,作用是动画效果. transition在w3school的实例: //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px: div { width:10

  • Vue中使用create-keyframe-animation与动画钩子完成复杂动画

    本篇文章主要介绍了 Vue中使用create-keyframe-animation与动画钩子完成复杂动画,分享给大家 如何实现这个动画?  效果分析 点`start`的时候,我们把整个动画拆分为两种效果(过渡和动画). 1. 中间cd消失,下方播放条显示,这是属于`过渡` 2. `过渡`开始的同时,cd同时移动.放大.缩小到左下方播放条 ,这属于`动画` 上面的效果是[过渡]加[动画]同时使用完成的 对于第一种[过渡],我们用vue中transition标签,加设置v-enter.v-leave

  • vue+animation实现翻页动画

    本文实例为大家分享了vue+animation实现翻页动画展示的具体代码,供大家参考,具体内容如下 前端在做数据展示的时候,可能提留页面时间较长,导致数据不能及时更新,你可以定时更新,也可以做一个假数据 给用户视觉上的体验,接下来就是第二种,假数据,它用了C3 animation 实现了一个翻页动画. 第一种是单独运动 <template> <div> <div> <ul> <li v-for="(item,i) in NumberList&

  • vue+animation动画实现跑马灯效果

    vue+animation动画实现跑马灯效果

    本文实例为大家分享了vue+animation动画实现跑马灯效果的具体代码,供大家参考,具体内容如下 1.单行显示,每行只显示一条 效果图 上代码 <template>   <div class="container">     <div class="box">       <!-- 假设lists列表有4个项,设置ul的宽度为800%(相对于box),设置li的宽度为12.5%(相对于ul是12.5%:相对于box是10

  • Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)

    以一个toggle按钮控制p元素显隐为例,如果不使用过渡效果,则如下所示 <div id="demo"> <button v-on:click="show = !show">Toggle</button> <p v-if="show">蓝色理想</p> </div> <script> new Vue({ el: '#demo', data: { show: tru

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

    目录 问题描述 问题原因 解决办法 1.将 keyframes 下的内容放到 scoped 的外边 2.去掉scoped 问题描述 鼠标移入移出,并没有出现闪动: <template> <div class="alarmIcon" ref="alarmIcon" @mouseenter="handleEnter" @mouseleave="handleLeave" ></div> </

  • 在vue中动态修改css其中一个属性值操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <!--此div的高度取屏幕可视区域的高度--> <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div> </template> <script> export default { data() { r

  • 解决vue单页面应用中动态修改title问题

    详细信息查看:vue-weachat-title 解决问题: 1.Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓) 2.在vue单页面中,通过浏览器分享到QQ.微信等应用中的链接,只有一个首页标题和默认icon图片 已测试:APP 微信 QQ 支付宝 淘宝 安装 npm install vue-wechat-title --save 用法 1.在main.js中引入 impor

  • vue实现动态进度条效果

    vue实现动态进度条效果

    本文实例为大家分享了vue实现动态进度条效果的具体代码,供大家参考,具体内容如下 演示效果: 结构 progress/index.js const controller = { init: require('./controllers/html'), speed: require('./controllers/speed') } exports.init = controller.init exports.speed = controller.speed progress/controllers

  • Vue中实现过渡动画效果示例代码

    Vue中实现过渡动画效果示例代码

    目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 同时设置两种动画(了解) 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在R

  • Vue中实现过渡动画效果实例详解

    Vue中实现过渡动画效果实例详解

    目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 总结 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动

  • 关于jquery中动态增加select,事件无效的快速解决方法

    近来做项目,用的jquery1.6.2库,当动态增加div 及select时,事件却不起作用. 查了一些资料,发现bind事件:向匹配元素附加一个或更多事件处理器.而live事件:为当前或未来的匹配元素添加一个或多个事件处理器. 其资料如下: [bind和live的区别] live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bin

  • Vue中动态引入图片要是require的原因解析

    Vue中动态引入图片要是require的原因解析

    目录 1.什么是静态资源 2. 为什么动态添加的src会被当做的静态的资源? 3. 没有进行编译,是指的是什么没有被编译? 4. 加上require为什么能正确的引入资源,是因为加上require就能编译了? 4.1 require是什么: 是一个node方法,用于引入模块,JSON或本地文件 4.2 调用require方法引入一张图片之后发生了什么: 5. 问题3中,静态的引入一张图片,没有使用require,为什么返回的依然是编译过后的文件地址? 6. 按照问题6中所说,那么动态添加src的

  • vue中动态添加class类名的方法

    vue 动态添加class类名,灵活得让你发狂,下面示例几个 <template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名, 第二个参数:boolean值 --> <!-- 对象的形式: 用花括号包裹起来,类名用引号, --> <!-- 优点: 以对象的形式可以写多个,用逗号分开 --> <p :class="{'p1'

  • vue中动态select的使用方法示例

    vue中动态select的使用方法示例

    本文实例讲述了vue中动态select的使用方法.分享给大家供大家参考,具体如下: html代码如下: 通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容 <template> <div class="violationsList"> <div class="type-select"> <select name="selected" id="" v

随机推荐