孙卫琴的《精通Vue.js》读书笔记-CSS中DOM元素的过渡模式

本文参考孙卫琴，杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书

当两个DOM元素进行切换时，假定DOM元素A进入隐藏过渡阶段，DOM元素B进入显示过渡阶段，它们的过渡顺序由组件的mode过渡模式属性来决定，mode有三个可选值：
（1）默认：A和B同时过渡，过渡结束后， B取代A的位置。
（2）in-out： B先进入显示过渡阶段， B过渡结束后， A再进入隐藏过渡阶段，A过渡结束后， B取代A的位置。
（3）out-in：A先进入隐藏过渡阶段， A过渡结束后， B在A的位置上进入显示过渡阶段，直到完全显现。

例程1的mode.html演示了三种过渡模式的过渡效果。mode.html中的组件通过v-if/v-else指令包裹了两个

例程1 mode.html

    

    

       切换    
       


       
       
       
         
div1
         
div2
       
    

    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

下面通过以下步骤来测试三种过渡模式的过渡效果。
（1）组件采用默认过渡模式：

1

通过浏览器访问mode.html，网页一开始显示红色的div1，点击网页上的“切换”按钮，div1进入隐藏过渡阶段，与此同时，div1下方的蓝色的div2进入显示过渡阶段。等到div1和div2过渡结束，div1消失，div2会取代div1在网页上的位置，参见图1。

图1 div1和div2分别进入隐藏过渡和显示过渡阶段

（2）组件采用in-out过渡模式：

1

通过浏览器访问mode.html，网页一开始显示红色的div1，点击网页上的“切换”按钮，div1下方的蓝色的div2进入显示过渡阶段。等到div2过渡结束，div1再进入隐藏过渡阶段。等到div1过渡结束，彻底消失后，div2再取代div1在网页上的位置。
（3）组件采用out-in过渡模式：

1

通过浏览器访问mode.html，网页一开始显示红色的div1，点击网页上的“切换”按钮，div1进入隐藏过渡阶段。等到div1过渡结束，彻底消失后，div2在div1所在的位置进入显示过渡阶段，直到完全显现。