解决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 相关文章推荐
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
原生js轮播特效
May 18 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
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
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python处理大日志文件
2019/07/23 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
python元组拆包实现方法
2021/02/28 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
学期自我评价
2014/01/27 职场文书
房屋租赁协议书
2014/04/10 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书