解决vue的过渡动画无法正常实现问题


Posted in Javascript onOctober 31, 2019

前记:最近在写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="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
  <div id="demo">
   <button v-on:click="show = !show">点击</button>
   <transition name="haha">
     <div class="bug" v-if="show">你好</div>
   </transition>
  </div>
  <script type="text/javascript">
    new Vue({
     el: '#demo',
     data: {
      show: true
     }
    })
  </script>
</body>
</html>

以上代码看起起来真的没有什么问题,但是复制粘贴发现过渡怎么变成了延迟,仔细阅读官方文档找不同,连连看;

我们要过度的属性是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="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
  <div id="demo">
   <button v-on:click="show = !show">点击</button>
   <transition name="haha">
     <div class="bug" v-if="show">你好</div>
   </transition>
  </div>
  <script type="text/javascript">
    new Vue({
     el: '#demo',
     data: {
      show: true
     }
    })
  </script>
</body>
</html>

这样就既可以实现过渡效果也不拆去div中优先级较高的css属性

以上这篇解决vue的过渡动画无法正常实现问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 方法实现返回多个数据的代码
Apr 30 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 #Javascript
js new Date()实例测试
Oct 31 #Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 #Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 #Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 #Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 #Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 #Javascript
You might like
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php获取图片信息的方法详解
2015/12/10 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
在Django的视图(View)外使用Session的方法
2015/07/23 Python
Python 闭包的使用方法
2017/09/07 Python
python机器学习库常用汇总
2017/11/15 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Python xlwt模块使用代码实例
2020/06/10 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
大学生物业管理求职信
2013/10/24 职场文书
计算机应用与科学个人的自我评价
2013/11/15 职场文书
师范生个人推荐信
2013/11/29 职场文书
初婚初育证明
2014/01/14 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
责任书格式
2015/01/29 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python