1、CSS中DOM元素的过渡模式
当两个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指令包裹了两个
元素，它们的key分别为div1和div2。mode.html网页上的“切换”按钮通过改变isShow变量，来轮流显示两个
元素。
（2）组件采用in-out过渡模式：
■ 例程1 mode.html
下面通过以下步骤测试三种过渡模式的过渡效果。
（1）组件采用默认过渡模式：
<transition name="special" >
通过浏览器访问mode.html，网页一开始显示红色的div1，单击网页上的“切换”按钮，div1进入隐藏过渡阶段，与此同时，div1下方的蓝色的div2进入显示过渡阶段。等到div1和div2过渡结束，div1消失，div2会取代div1在网页上的位置，参见图1。
■ 图1 div1和div2分别进入隐藏过渡和显示过渡阶段
（2）组件采用in-out过渡模式：
<transition name="special" mode="in-out" >
通过浏览器访问mode.html，网页一开始显示红色的div1，单击网页上的“切换”按钮，div1下方的蓝色的div2进入显示过渡阶段。等到div2过渡结束，div1再进入隐藏过渡阶段。等到div1过渡结束，彻底消失后，div2再取代div1在网页上的位置。
（3）组件采用out-in过渡模式：
<transition name="special" mode="out-in" >通过浏览器访问mode.html，网页一开始显示红色的div1，单击网页上的“切换”按钮，div1进入隐藏过渡阶段。等到div1过渡结束，彻底消失后，div2在div1所在的位置进入显示过渡阶段，直到完全显现。
