解决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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
JS分页效果示例
Oct 11 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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
php文件怎么打开 如何执行php文件
2011/12/21 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
使用JS动态显示文本
2017/09/09 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
python爬取51job中hr的邮箱
2016/05/14 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python创建数字列表的示例
2019/11/28 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
体育教育个人自荐信范文
2013/12/01 职场文书
《理想》教学反思
2014/02/17 职场文书
年会主持词结束语
2014/03/27 职场文书
交通事故协议书范文
2014/10/23 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
Win11 BitLocker 驱动器加密
2022/04/19 数码科技