解决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 验证浏览器是否支持javascript的方法小结
May 17 Javascript
js 编写规范
Mar 03 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
JavaScript实现滚动加载更多
Dec 27 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 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可逆加密函数(分享)
2013/06/06 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
php实现的简单检验登陆类
2015/06/18 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
超实用的 30 段 Python 案例
2019/10/10 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
10的分与合教学反思
2014/04/30 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
感谢信模板大全
2015/01/23 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技