原副标题：通晓Vue.js系列产品 │ CSS中DOM原素的过渡时期商业模式
CSS中DOM原素的过渡时期商业模式。
1
CSS中DOM原素的过渡时期商业模式
当四个DOM原素展开转换时，假设DOM原素A步入暗藏过渡时期阶段，DOM原素B步入表明过渡时期阶段，它的过渡时期次序由<transition>模块的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中的<transition>模块透过v-if/v-else命令包覆了四个 <div>原素，它的key分别为div1和div2。mode.html页面上的“转换”按键透过发生改变isShow表达式，来一齐表明四个<div>原素。
■解释器1 mode.html
上面透过下列关键步骤试验四种过渡时期商业模式的过渡时期效用。
（1） <transition>模块采用预设过渡时期商业模式：
< transitionname= “special”>
透过浏览器访问mode.html，页面一开始表明红色的div1，单击页面上的“转换”按键，div1步入暗藏过渡时期阶段，与此与此同时，div1下方的蓝色的div2步入表明过渡时期阶段。等到div1和div2过渡时期完结，div1消失，div2会替代div1在页面上的边线，参见图1。
■图1 div1和div2分别步入暗藏过渡时期和表明过渡时期阶段
（2） <transition>模块采用in-out过渡时期商业模式：
<transition name= “special”mode= “in-out”>
透过浏览器访问mode.html，页面一开始表明红色的div1，单击页面上的“转换”按键，div1下方的蓝色的div2步入表明过渡时期阶段。等到div2过渡时期完结，div1再步入暗藏过渡时期阶段。等到div1过渡时期完结，彻底消失后，div2再替代div1在页面上的边线。
（3） <transition>组件采用out-in过渡时期商业模式：
<transition name= “special”mode= “out-in”>
透过浏览器访问mode.html，页面一开始表明红色的div1，单击页面上的“转换”按键，div1步入暗藏过渡时期阶段。等到div1过渡时期完结，彻底消失后，div2在div1所在的边线步入表明过渡时期阶段，直至全然显现出来。
2
参考书籍
《通晓Vue.js：Web前端开发技术详解（微课视频版）》
详细阐述用Vue框架的各种技术；深刻揭示前端开发的响应式编程核心思想；介绍与其他流行技术的整合；典型范例帮助读者迅速获得实战经验。
作者：孙卫琴，杜聚宾
价格：119元
扫码优惠购书
实例讲解
通晓Vue.js：
Web前端开发技术详解
精彩回顾
1. Vue模块的命名规则
2 . 注册全局模块和局部模块
3 . 路由导航中抓取数据
4. 路由管理器的基本用法
5. 命名路由
下期预告
7. 插槽slot的基本用法
8. 模块的递归
9. 在Vue项目中使用Axios
10. 自定义命令v-drag范例
11. Vuex中的异步操作
12. 分割setup函数
13. Vue模块的单向数据流
14. Vue的数据监听
