为单个元素或组件提供动画过渡效果。
属性
interface TransitionProps {
/**
* Used to automatically generate transition CSS class names.
* e.g. `name: fade'` will auto expand to `.fade-enter`,
* `.fade-enter-active`, etc.
*/
name?: string
/**
* Whether to apply CSS transition classes.
* Default: true
*/
css?: boolean
/**
* Specifies the type of transition events to wait for to
* determine transition end timing.
* Default behavior is auto detecting the type that has
* longer duration.
*/
type?: 'transition' | 'animation'
/**
* Specifies explicit durations of the transition.
* Default behavior is wait for the first `transitionend`
* or `animationend` event on the root transition element.
*/
duration?: number | { enter: number; leave: number }
/**
* Controls the timing sequence of leaving/entering transitions.
* Default behavior is simultaneous.
*/
mode?: 'in-out' | 'out-in' | 'default'
/**
* Whether to apply transition on initial render.
* Default: false
*/
appear?: boolean
/**
* Props for customizing transition classes.
* Use kebab-case in templates, e.g. enter-from-class="xxx"
*/
enterFromClass?: string
enterActiveClass?: string
enterToClass?: string
appearFromClass?: string
appearActiveClass?: string
appearToClass?: string
leaveFromClass?: string
leaveActiveClass?: string
leaveToClass?: string
}
事件
@before-enter
@before-leave
@enter
@leave
@appear
@after-enter
@after-leave
@after-appear
@enter-cancelled
@leave-cancelled
(仅限v-show
)@appear-cancelled
示例
简单元素:
<Transition>
<div v-if="ok">toggled content</div>
</Transition>
动态组件,出现过渡模式+动画:
<Transition name="fade" mode="out-in" appear>
<component :is="view"></component>
</Transition>
监听转换事件:
<Transition @after-enter="onTransitionComplete">
<div v-show="ok">toggled content</div>
</Transition>
相关用法
- Vue.js <TransitionGroup>用法及代码示例
- Vue.js <Teleport>用法及代码示例
- Vue.js <component>用法及代码示例
- Vue.js <KeepAlive>用法及代码示例
- Vue.js useSSRContext()用法及代码示例
- Vue.js app.directive()用法及代码示例
- Vue.js mergeProps()用法及代码示例
- Vue.js app.config.warnHandler用法及代码示例
- Vue.js pipeToWebWritable()用法及代码示例
- Vue.js app.use()用法及代码示例
- Vue.js v-pre用法及代码示例
- Vue.js h()用法及代码示例
- Vue.js serverPrefetch用法及代码示例
- Vue.js customRef()用法及代码示例
- Vue.js inject()用法及代码示例
- Vue.js mixins用法及代码示例
- Vue.js ComponentCustomProps用法及代码示例
- Vue.js reactive()用法及代码示例
- Vue.js ComponentCustomProperties用法及代码示例
- Vue.js app.mount()用法及代码示例
- Vue.js createRenderer()用法及代码示例
- Vue.js onMounted()用法及代码示例
- Vue.js createApp()用法及代码示例
- Vue.js app.config.errorHandler用法及代码示例
- Vue.js v-on用法及代码示例
注:本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 <Transition>。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。