前记:最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实;
建议:先学习vue官方文档的进入/离开 & 列表过渡章节,那么我们来看bug;
首先上出现问题的代码
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .haha-leave-active { transition: opacity .5s; } .haha-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } #demo{ position: relative; width: 200px; height: 200px; margin: auto; top: 100px; } .bug{ position: relative; opacity: 1; } </style> <script src="/UploadFiles/2021-04-02/vue.js">以上代码看起起来真的没有什么问题,但是复制粘贴发现过渡怎么变成了延迟,仔细阅读官方文档找不同,连连看;
我们要过度的属性是opacity,相对于官方文档我们在要过渡的div里多加了一个opacitry的属性值为1,这就导致其实整个动画过程中opacitry的值都为1而不会出现动画中由1到0的过渡;
导致这个问题的根本原因是因为css优先级的问题,div的css优先级远大于动画中css属性的优先级,所以opacity的值始终都是div中的值并不发生过渡变化;
那么解决的办法其一当然是去掉在div中的opacitry的值,从而使得只存在动画中的opacitry从而实现动画;
但是当div中的属性需要存在我们又需要过渡动画的时候,我们需要!important这尊大神去改变css的优先级;!important是使当前css的优先级达到最高当然important就是优先级最低;
来! 上正确的代码
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .haha-leave-active { transition: opacity .5s; } .haha-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } #demo{ position: relative; width: 200px; height: 200px; margin: auto; top: 100px; } .bug{ position: relative; opacity: 1 important; } </style> <script src="/UploadFiles/2021-04-02/vue.js">这样就既可以实现过渡效果也不拆去div中优先级较高的css属性
以上这篇解决vue的过渡动画无法正常实现问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
vue,过渡动画
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“解决vue的过渡动画无法正常实现问题”评论...
更新动态
20240517
20240517
- 刘欢.2004-经典20年珍藏锦集【新索】【WAV+CUE】
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV
- CD圣经上榜天碟1995-乌仁娜-《蒙古草原之歌》[WAV+CUE].
- 【电影原声】武满彻《旭日东升》1993[WAV+CUE整轨]
- Taylor Swift《THE TORTURED POETS DEPARTMENT》[320K/MP3][148.54MB]
- Taylor Swift《THE TORTURED POETS DEPARTMENT》[FLAC/分轨][405.72MB]
- Joyce Jonathan《法式松弛感 漫步香榭丽舍》[320K/MP3][80.8MB]
- 女神异闻录5佐仓双叶coop攻略 p5r佐仓双叶对话选项攻略
- 【民谣】张智《尼勒克小镇》[FLAC]
- 林一峰2018-TRAVELOGUE4ESCAPE[香港首版][WAV+CUE]
- MollyLewis《OnTheLips》(2024)[Hi-Res96kHz_24bitFLAC]
- Joyce Jonathan《法式松弛感 漫步香榭丽舍》[FLAC/分轨][230.77MB]
- 群星《影视剧 春色寄情人 原声带》[320K/MP3][394.18MB]
- 吴牧野《强者独白II 李斯特巅峰作品选》[320K/MP3][216.01MB]
- 女神异闻录5御船千早coop攻略 p5r御船千早对话选项攻略