全面分析Vuejs过渡动画案例在Vuejs第7章

这份材料是边肖结合官方文献整理的比较全面详细的描述，代码也越来越完整。

这些信息来自官方文件：

http://cn.vuejs.org/guide/transitions.html

让我们来看看过渡动画的相关知识：

过渡动画的定义；

简单来说，模块消失出现的时候，会以什么形式消失出现；

如果要使用过渡动画，请向标签添加属性：

过渡=“过渡动画名称”

例如：

Div class=' box' v-if=' box _ 1 '转场=' mytran' 1/div这是mytran，是转场动画的名字。这是一个类名，动画将基于这个名称添加几个不同的扩展(详见下文)

过渡动画绑定事件：

【1】v-if

【2】电视节目

[3] V-for(仅在插入和删除时触发，可自行编写，或使用vue-动画列表插件)；

自己写，比如：

div v-for=' I in items ' class=' box ' transition=' mytran ' { I } }/div动画编写(参考以下内容)

[4]动态组件；

[5]它在组件的根节点上，由Vue实例DOM方法触发(例如：vm。$ appendo(El))。也就是说，向根节点添加一个组件。

CSS动画：

[1]首先需要有一个过渡属性，然后得到它的值；

[2]其次，CSS需要在值的名称中有三个类名，分别是：

假设transition的值是mytran，类名是

解释。mytran转换

动画状态，css的过渡属性放在这里，他所代表的类会一直存在于DOM上；

此外，此处的样式会覆盖由标签的默认类提供的样式。mytran-enter

进入时，组件从这个css状态扩展到当前的css状态，这个类只有第一帧。我的假期

退出时，组件从其原始css状态恢复到此状态。此类在退出开始时生效，并在退出结束时删除。

例如代码：

风格。box { width: 100px高度： 100像素；border: 1px纯红；display:内联块；}/*这定义了动画的情况和存在时的风格。这种样式将覆盖class */中的样式。mytran-transition { transition : all 0.3 ease；背景-颜色：绿黄色；} /* .mytran-enter定义条目开始状态*//*。mytran-leave定义退出结束状态*/。mytran-输入。mytran-leave { height : 0；宽度： 0；}/style div id=' app ' button @ click=' change ' click隐藏并随机显示/button br/div class=' box ' v-if=' box _ 1 ' transition=' my tran ' 1/div class=' box ' v-if=' box _ 2 ' transition=' my tran ' 2/div class=' box ' v-if=' box _ 3 ' transition=' my tran ' 3/div/div脚本var vm=new Vue({ el: '#app '，data 3333333i4；i ) {这个['box_' i]=Math.random() 0.5？真：假；} } } }) setInterval(vm.change，300)；/script点击会随机隐藏或显示3个方块；

JavaScript挂钩：

[1]简单来说，这并不影响CSS动画(依然是那三个类的变化)；

[2]这主要是用来把握进入和离开的四个瞬间，并有所作为；

[3]这八个时刻是：

输入：输入前、输入中、输入后、输入取消；

退出：离职前、离职、离职后、离职取消；

[4]在某些情况下，将恢复对dom的修改。比如在离开步骤修改dom的textContent属性，会在DOM重新进入时恢复原来的状态；但是，如果在输入时被修改，它将不会被恢复。

例如代码：

Vue.transition ('mytran '，{在输入：函数(el)之前){//输入console.log('输入动画开始时间：' new Date()。getTime()))；}，输入：函数(El){ El . text content=new Date()；}，在输入：函数(El) {console.log('输入结束时间： '新日期()后。getTime())；}，在离开：函数之前(El) {console.log('离开动画开始时间： '新日期()。getTime())；}，离开：函数(El) {$ (El)。文本('离开.'新日期())；}，离开：函数后(El) {console.log('离开结束时间： '新日期()。getTime())；}}) 自定义过渡类名：

之所以要自定义过渡类名，是因为我们不能要求每一个css动画样式都按照Vuejs标准来写(比如我们下载别人写的代码)；

注意：需要在声明相关的Vue实例之前定义它。

首先推荐一个Vuejs官方教程推荐的动画集：(这不是下载链接，下载前需要打开找到下载链接)

https://daneden.github.io/animate.css/

下载后，导入这个css文件，然后开始自定义动画；

div id=' app ' button @ click=' change ' click隐藏并随机显示/buttonbr/div class=' box动画' v-if=' box ' transition=' bounce ' 1/div/div脚本Vue.transition('bounce '，{ enter class 3: ' bounce einleft '，leaves class : ' bounce eoutright ' })var VM=new Vue({ El : ' # app '，data: { box: true }，methods: {这个盒子；} } });/脚本解释：

[1]动画标签需要有动画类；

[2]进入类和离开类相当于XXX-进入和XXX-离开；之前；

[3]效果是从左边闪进来，从右边闪出去。

[4]声明Vue实例前需要设置动画，否则无效；

使用动画动画

在Vuejs中，动画和过渡动画是不同的。

简单来说，过渡动画分为三步：常驻类，进入时触发类，退出时触发类；只有常驻类有过渡动画属性，其他两个步骤只有css状态；

动画动画分为两个步骤：进入时触发的类和退出时触发的类。当然，dom中存在xxx-transition(这个类可以用来设置动画原点，或者干脆不设置这个类)；

在动画动画中，类类在进入和退出时应该有动画效果，比如：

@关键帧fat { 0% { width : 100 px } 50% { width : 200 px } 100% { width : 100 px } }。胖离开。fat-enter { animation: fat 1s两者；}进入退出时，执行的类名与过渡相同，格式为xxx-leave，XXX-enter；

当然，您也可以自定义类名。

示例代码：

风格。box { width: 100px高度： 100像素；border: 1px纯红；display:内联块；} @关键帧fat { 0% {宽度： 100px } 50% {宽度： 200px } 100% {宽度： 100px } }。胖离开。fat-enter { animation: fat 1s两者；}/style div id=' app ' button @ click=' change ' click隐藏并随机显示/button br/div class=' box animated ' v-if=' box ' transition=' fat ' 1/div/div script var VM=new Vue({ El : ' # app '，data: { box: true }，methods : { change : function(){ this . box=！这个盒子；} } });/脚本效果：

消失：先加宽，后恢复，再消失；

进入：出现、扩大、恢复和停留；

懒惰在这里分享同样的动画效果。

此外，还有

[1]明确声明动画类型(如果动画既有过渡又有动画，根据情况执行其中一种)；

[2]过渡过程的详细说明(触发动画时js钩子执行和css执行的顺序)；

[3] CSS动画(即动画，已经写成如上，具体省略)；

[4] JavaScript过渡(不是js hook，hook的意思是在某个阶段会调用某个函数，但这个hook与动画无关)，而JavaScript是用来控制动画的，比如jquery的animate方法；

[5]V-供使用的逐步过渡；

因为暂时不可用，所以省略。如果需要查看，请打开连接：

http://cn.vuejs.org/guide/transitions.html

以上是对边肖介绍的Vuejs第七章中Vuejs过渡动画案例的综合分析，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！