`
};
var ComC = {
template: `
请选择汤:
<label for=“tang1"”>西红柿鸡蛋汤:
<input id=“tang1"” type=“radio” name=“tang” value=“tang1"”>
`
};
var ComD = {
template: `
请输入支付信息:
<label for=“account”">请输入账号:
<input id=“account”" type=“text” name=“account”>
`
};
new Vue({
el: ‘#app’,
data: {
titles: [‘ComA’, ‘ComB’, ‘ComC’, ‘ComD’],
currentCom: ‘ComA’
},
components: {
ComA, ComB, ComC, ComD
}
});
用于在 Vue 插入、更新或者移除 DOM 时, 提供多种不同方式的应用过渡、动画效果。
transition 组件
- 用于给元素和组件添加进入/离开过渡:
条件渲染 (使用 v-if )
条件展示 (使用 v-show )
动态组件
组件根节点
- 组件提供了 6个 class,用于设置过渡的具体效果。
v-enter
v-enter-to
v-enter-active
v-leave
v-leave-to
v-leave-active
<button @click=“show = !show”>切换
hello world
相关属性
-
给组件设置 name 属性,可用于给多个元素、组件设置不同的过渡效果,这时需要将 v- 更改为对应 name- 的形式。
-
通过 appear 属性,可以让组件在初始渲染时实现过渡。
<button @click=“show = !show”>切换1
这是要切换的元素1
<button @click=“showDemo = !showDemo”>切换2
<transition
name=“demo”
appear
这是要切换的元素2
自定义过渡类名
-
自定义类名比普通类名优先级更高,在使用第三方 CSS 动画库时非常有用。
-
用于设置自定义过渡类名的属性如下:
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
appear-class
appear-to-class
appear-active-class
<button @click=“show = !show”>切换
<transition
enter-active-class=“test”
leave-active-class=“test”
这是 p 标签
transition-group 组件
-
<transition-group>
用于给列表统一设置过渡动画。 -
tag 属性用于设置容器元素,默认为
<span>
。 -
过渡会应用于内部元素,而不是容器。
-
子节点必须有独立的 key,动画才能正常工作。
-
当列表元素变更导致元素位移,可以通过 .v-move 类名设置移动时的效果。