vue过度动画的使用方法整理

xiaolinbang 发布于2019-08-29 15:05 / 787人阅读

摘要：事件有效六个过度类名简单地说就是会伴随的整个过程，与存在的时长只都有一帧，所以用肉眼看与几乎是同时出现，同时消失的。未触发效果触发效果，因为所以在他之后的都上移位置发生改变未触发效果，过度开始时改变位置才有效

transition props

name： - string，用于自动生成 CSS 过渡类名。例如：name: "fade" 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 "v"

appear： - boolean，是否在初始渲染时使用过渡。默认为 false。

css： - boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。

type： - string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。

mode： - string，控制离开/进入的过渡时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时生效。

enter-class： - string

leave-class： - string

appear-class： - string

enter-to-class： - string

leave-to-class： - string

appear-to-class： - string

enter-active-class： - string

leave-active-class： - string

appear-active-class： - string

事件

before-enter

before-leave

before-appear

enter

leave

appear

aftrt-enter

after-leave

after-appear

enter-cancelled

leave-cancelled(v-show有效)

appear-cancelled

六个过度类名

简单地说就是 active 会伴随 enter/leave 的整个过程，v-enter 与 v-leave 存在的时长只都有一帧，所以用肉眼看v-enter-to与v-enter-active几乎是同时出现，同时消失的。

于是就会经常看到一些相同动画效果写法却不完全一样：（这也是我之前存在疑惑的地方）

1、

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

2、

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}

单组件过度 过度

  
    hello

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

动画

类似的只需要在过度类中填写动画即可

.fade-enter-active, .fade-leave-active {
  animation: fade-in .5s;
}
.fade-enter, .fade-leave-to {
  animation:fade-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    ooacity: 0;
  }
  50% {
    ooacity: .5;
  }
  100% {
    ooacity: 1;
  }
}

自定义过度类名

vue还支持分别添加自定义过度类名，能够方便的配合第三方动画库

enter-class

enter-active-class

enter-to-class (2.1.8+)

leave-class

leave-active-class

leave-to-class (2.1.8+)

JavaScript钩子

methods: {
  beforeEnter: function (el) {
    el.style.opacity = 0; //el:进行当前动作的dom元素
  },
  //当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。否则，它们会被同步调用，过渡会立即完成。
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },


  beforeLeave: function (el) {
    // ...
  },
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

列表过度

列表过度使用组件,并且需要绑定唯一的key

v-move特性

Vue 使用了一个叫 FLIP 简单的动画队列，使用 transforms 将元素从之前的位置平滑过渡新的位置。

*v-move是在过度开始时判断元素的位置是否发生改变，并且key是识别每个元素的关键。在v-for中用index来绑定key值就不会虽然可行，但是不会触发v-move效果，因为不管数据怎么变数组下标还是没变。

*一定要在过度开始时就然元素的位置发生改变：v-enter或者v-leave或者active阶段，而v-leave-to 和v-enter-to不行

看下面一个demo，因为只是一组垂直排列的li所以position：absolute会腾出位置，之后的li会上移。

    
      
        {{item.text}}

    .slide-move{            /*v-move*/
        trsnsition: all .5s;
    }
    .slide-leave-active{    /*未触发v-move效果*/
       transform: translate3d(-100%, 0, 0);
    }
    .slide-leave-active{    /*触发v-move效果，因为absolute所以在他之后的li都上移位置发生改变*/
       position: absolute;
       transform: translate3d(-100%, 0, 0);
    }
    slide-leave-to{    /*未触发v-move效果，过度开始时改变位置才有效*/
       position: absolute;
       transform: translate3d(-100%, 0, 0);
    }

专线服务超融合服务器动画方法 vue使用webrtc vue 中使用 webrtc vue怎么使用webRTC

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113094.html

Vue.js进入/离开&列表过度动画。

摘要：包括以下工具在过渡和动画中自动应用可以配合第三方动画库，如在过渡钩子函数中使用直接操作可以配合使用第三方动画库，如在这里，我们只会讲到进入离开和列表的过渡。不仅可以进入和离开动画，还可以改变定位。概述 Vue在插入、更新或则移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具： *在CSS过渡和动画中自动应用class *可以配合第三方CSS动画库，如Animate.css *...

thekingisalwaysluc 2019-08-23 15:23 评论0 收藏0
慕课网饿了么 vue2.0 项目

饿了么 vue 项目总结项目效果预览 ele效果预览项目源码地址 ele源码跟着慕课网黄轶老师敲饿了么 vue 项目作者项目源代码地址项目完成之后 npm run build 这本来是写在最后面一段的，我现在把他写在了最前面，方便我们事先知道，整个项目做完之后是什么样子的项目完成之后在根目录下 npm run build （就是 npm run dev 的那个目录）会在根目录...

xuexiangjys 2019-08-20 18:10 评论0 收藏0
接触的第一个vue项目

摘要：序言刚来杭州的时候，是两个人一起来的。后来一个回家当老师，一个留在了杭州。想起那时，在慕课买的第一课程，囫囵吞枣的看完了。现在回过头来看看，这个临时抱佛脚的启蒙项目，真的还有不少的收获。滚动视图的位置缓存路由元对象。序言刚来杭州的时候，是两个人一起来的。后来一个回家当老师，一个留在了杭州。想起那时，在慕课买的第一课程，囫囵吞枣的看完了。勉强才找到了一份工作，今天看起来，其实还是有点...

Gemini 2019-08-26 14:04 评论0 收藏0
作为前端开发，如何写好一个简历

摘要：项目地址需求来源通常在各个招聘网站，我们填写完一些信息后，网站就可以帮助我们生成一个很不错的简历。但是作为一名开发者，尤其是前端开发者，可能对这种简历并不满意。，前端开发神器。最后，为了保护隐私。背景前一阵子，闲下来便开始着手做一个一直想做的东西--resume。经过几天业余时间的折腾，终于做出了一番模样。Github项目地址：https://github.com/eternity...

abson 2019-08-29 11:14 评论0 收藏0
作为前端开发，如何写好一个简历

摘要：项目地址需求来源通常在各个招聘网站，我们填写完一些信息后，网站就可以帮助我们生成一个很不错的简历。但是作为一名开发者，尤其是前端开发者，可能对这种简历并不满意。，前端开发神器。最后，为了保护隐私。背景前一阵子，闲下来便开始着手做一个一直想做的东西--resume。经过几天业余时间的折腾，终于做出了一番模样。Github项目地址：https://github.com/eternity...

freewolf 2019-08-05 10:06 评论0 收藏0