解决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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
swiper 自动图片无限轮播实现代码
May 21 Javascript
通过layer实现可输入的模态框的例子
Sep 27 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
利用js调用后台php进行数据处理原码
2006/10/09 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python文件和目录操作函数小结
2014/07/11 Python
python制作最美应用的爬虫
2015/10/28 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
行政经理岗位职责
2013/11/09 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
党支部鉴定意见
2015/06/02 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
python中的None与NULL用法说明
2021/05/25 Python
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技