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 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
axios 实现post请求时把对象obj数据转为formdata
今天小编就为大家分享一篇axios 实现post请求时把对象obj数据转为formdata,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10vue-devtools 开发工具插件之支持vue3 chrome 浏览器插件
这篇文章主要介绍了vue-devtools 开发工具插件之支持vue3 chrome 浏览器插件,用这个版本主要是为了支持vue3 推荐直接下载,文中给大家提供了下载地址,感兴趣的朋友跟随小编一起看看吧2022-01-01vue3报错提示找不到模块“./XXX.vue”或其相应的类型声明问题
这篇文章主要介绍了vue3报错提示找不到模块“./XXX.vue”或其相应的类型声明问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-06-06vue-element-admin关闭eslint的校验方式
这篇文章主要介绍了vue-element-admin关闭eslint的校验方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08
最新评论