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

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

写个简单的结构：

<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 退出动画无效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中v-model的应用及使用详解

    vue中v-model的应用及使用详解

    vue中经常使用到<input>和<textarea>这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别.vue使用v-model实现这些标签数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素. v-model本质上是一个语法糖.如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.t

  • Vue.js 中的 v-show 指令及用法详解

    1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc

  • 对vue中v-if的常见使用方法详解

    使用过Vue的小伙伴一定使用过v-if 这个属性,但是这个属性主要是来干什么的呢,他得用途是那些? 这里我总结了一下,v-if使用一般有两个场景: 1- 多个元素 通过条件判断展示或者隐藏某个元素.或者多个元素 2- 进行两个视图之间的切换 下面我写了两个例子,是Vue官方的简单实例. 第一个实例实现了 type等于不同值,A,B,C 三个元素的展示情况. 第二个例子实现了,点击按钮实现两个视图的切换. <!DOCTYPE html> <html lang="en"&

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

    遇到一个问题:给模态框加入退出动画,进入的动画效果是有的,可是退出的动画就没有了. 写个简单的结构: <div class="<strong>mask</strong>" v-show="warning"><br> <transition name="warning"><br> <div v-show="warning" class="wa

  • 解决vue scoped scss 无效的问题

    今天遇到scoped内部的scss设置无效,解决办法如下: /deep/ <style scoped lang="scss"> .position-el-steps { /deep/ .el-step.is-vertical { .el-step__description { margin-top: -20px; } .el-step__line { border-left: 2px dashed #c0c4cc; background-color: transparent

  • 解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

    项目类型:vue+vux+axios 刚开始,把Axios封装在了http.js文件里面,然后为了使用VUX的提示框消息,把拦截器直接写在了main.js里面.直接调用接口,一切正常. 然而因为返回值有统一的code错误代码提示,所以在拦截器里面加入了code的判断以便统一返回值.刚开始一切都是按照预期的结果来走的.就在一个夜黑风高的晚上,我头晕眼花的按F5手动刷新了一下页面,惊奇的发现拦截器失效了,并没有拦截外面的Coode Json代码层,而是直接把服务器的全部json数据劈头盖脸的砸在了我

  • 快速解决vue动态绑定多个class的官方实例语法无效的问题

    首先,直接进入正题,我想要给一个dom绑定多个class,而且是动态绑定,这个时候可以用v-bind简写可以写为" :"冒号,我查了官方的语法, 具体如下: <!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[cl

  • 解决vue.js this.$router.push无效的问题

    如下所示: login() { if(this.email.length > 0 && this.password.length >0) { this.$http.post('/api/login', { user: this.email, password: this.password }) .then(res => { let userPwd = res.data if(this.password == userPwd) { this.$router.push(&qu

  • 解决vue admin element noCache设置无效的问题

    1.后台返回的数据 { path: '/fbgq', name: 'fbgq', component: () => import('../views/part/fbgq.vue'), meta: { title: '发布供求', noCache:false } }, 2.对应vue文件fbgq.vue 要在script设置统一的name名称 export default { name:"fbgq", } 以上这篇解决vue admin element noCache设置无效的问题

  • 解决vue的过渡动画无法正常实现问题

    前记:最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实; 建议:先学习vue官方文档的进入/离开 & 列表过渡章节,那么我们来看bug; 首先上出现问题的代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .haha-leave-active { transitio

  • Vue 解决路由过渡动画抖动问题(实例详解)

    前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发中起着至关重要的作用.同时路由还支持视图过渡效果,没有添加过渡动画的路由切换会感觉很生硬,为了提高用户体验,路由过渡还是很有必要的.毕竟做出来,自己看着也舒服. 过渡动效文档:https://cn.vuejs.org/v2/guide/transitions.html 过渡动画抖动 代码片段 这里为

  • 快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

    问题: 使用this.$ref['form'] .resetFields()无法重置表单项 原因: 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="sizeForm" label-width="80px&qu

  • 解决vue中使用less/sass及使用中遇到无效的问题

    一:使用方法 在vue官方脚手架中,即vue-lci搭建的项目中,可以轻易的使用less/sass. 先使用npm下载依赖,命令行为'npm install less less-loader –save',再在webpack.base.conf.js中添加rules对象: { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }` 然后在style标签中添加lang="less"即可,或者直

随机推荐