解决vue 退出动画无效的问题


Posted in Javascript onAugust 09, 2020

遇到一个问题:给模态框加入退出动画,进入的动画效果是有的,可是退出的动画就没有了。

写个简单的结构:

<div class="<strong>mask</strong>" v-show="warning"><br>
<transition name="warning"><br>


<div v-show=“warning” class="warning-modal"><br>



<p>请登录</p><br>


</div><br>

</transition><br></div>

.mask是遮罩层,.warning-modal是显示模态框的内容。

如果像上面的结构,会遇到我上述的问题。因为warning-modal包裹在.mask遮罩层里面。但是.mask没有动画,一点击关闭,.mask没有动画,就直接消失了,warning-modal跟着.mask消失,它的退出动画我们也就看不到了。如果把transition放在外面。

<transition name="warning">
  <div class="mask" v-show="warning">

<div v-show=“warning” class="warning-modal">



<p>请登录</p>


</div>
  </div>

</transition>

很显然 ,遮罩层也会跟着提醒框有动画!

我的解决方法的做法是加两个transition

<transition name="mask">
  <div class="mask" v-show="warning">
   <transition name="warning">

  <div v-show=“warning” class="warning-modal">



 <p>请登录</p>


  </div>


</transition>

</div>

</transition>

//然后给maskde 退出动画增加transition-delay属性。

.mask-leave-active{
   transition:all 1s;
   transition-delay:1s;
}

补充知识:vue利用三目运算符绑定class

通过三目运算符来绑定class是一种比较常见的操作

需要注意的是要在data里面声音下class的名称

<p :class="isIncrse?incrseP:downP">环比<i></i>{{item.num}}</p>
data() {
  return {
    isIncrse: true,
    incrseP: 'incrseP',
    downP: 'downP'
  }
}
.downP {
  color: red;
}
.incrseP {
  color: pink;
}

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

Javascript 相关文章推荐
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
react redux入门示例
Apr 19 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
在vue中使用console.log无效的解决
Aug 09 #Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 #Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 #Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 #Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 #Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 #Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 #Javascript
You might like
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
php短址转换实现方法
2015/02/25 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
PHP引用的调用方法分析
2016/04/25 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
JavaScript 实现??打印?理
2007/04/28 Javascript
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
应届生法律求职信
2013/10/22 职场文书
关于期中考试的反思
2014/02/02 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
技术合作协议书范本
2014/04/18 职场文书
校园环保标语
2014/06/13 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
运动员代表致辞
2015/07/29 职场文书
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis