该组件用于组件的动画过渡效果。
#平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
√ | √ | √ | √ |
#基本使用
通过slot传入内容,默认使用的是fade
效果
<template> <u-transition :show="show"> <view class="transition"></view> </u-transition> </template> <script> export default { data() { return { show: true } } } </script>
copy
#动画模式
通过mode
传入效果模式,目前支持:
fade
淡入fade-up
上滑淡入fade-down
下滑淡入fade-left
左滑淡入fade-right
右滑淡入slide-up
上滑进入slide-down
下滑进入slide-left
左滑进入slide-right
右滑进入zoom-in
缩放zoom-out
缩放
<template> <u-transition :show="show" mode="zoom-in"> <view class="transition"></view> </u-transition> </template> <script> export default { data() { return { show: true } } } </script>