低代码高性能原生UI框架Transition
组件类型：UxTransitionComponentPublicInstance
支持淡入、缩放、缩放淡入、上滑淡入、下滑淡入、左滑淡入、右滑淡入、上滑进入、下滑进入、左滑进入、右滑进入等动画方式
平台兼容性
UniApp X
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | √ |
UniApp Vue Nvue
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| x | x | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| show | Boolean | false | 显示状态 |
| mode | String | fade | 动画模式 |
| duration | Number | 300 | 动画的执行时间，单位ms |
| timingFunction | String | ease-out | 使用的动画过渡函数 |
| xstyle | Array | 自定义样式 |
mode
| 值 | 说明 |
|---|---|
| fade淡入 | |
| zoom缩放 | |
| fade-zoom缩放淡入 | |
| fade-up上滑淡入 | |
| fade-left左滑淡入 | |
| fade-right右滑淡入 | |
| fade-down下滑淡入 | |
| slide-up上滑进入 | |
| slide-left左滑进入 | |
| slide-down下滑进入 | |
| slide-right右滑进入 | |
timingFunction
| 值 | 说明 |
|---|---|
| ease开始缓慢，然后逐渐加速，最后减速结束 | |
| ease-in过渡开始时较慢，然后逐渐加速 | |
| ease-out过渡开始时较快，然后逐渐减速 | |
| ease-in-out过渡开始时较慢，然后加速，最后减速 | |
| linear恒定速度，没有加速或减速 | |
| cubic-bezier用于自定义CSS过渡（transition）的时间函数的函数，它允许你精确地定义过渡效果的速度变化 | |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| beforeEnter | 进入前触发 | |
| enter | 进入中触发 | |
| afterEnter | 进入后触发 | |
| beforeLeave | 离开前触发 | |
| leave | 离开中触发 | |
| afterLeave | 离开后触发 | |
| transitionend | 动画结束后触发 |
示例代码
html
<template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :bold="true">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag-filled" title="过渡动画" :bold="true">
<ux-text text="支持淡入、缩放、缩放淡入、上滑淡入、下滑淡入、左滑淡入、右滑淡入、上滑进入、下滑进入、左滑进入、右滑进入等动画方式"></ux-text>
</ux-card>
<ux-card direction="column" icon="arrowright" title="淡入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playFade"></ux-button>
</template>
<ux-row style="height: 50px;">
<ux-transition :show="fadeShow" mode="fade" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="缩放" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playZoom"></ux-button>
</template>
<ux-row style="height: 50px;">
<ux-transition :show="zoomShow" mode="zoom" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="缩放淡入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playFadeZoom"></ux-button>
</template>
<ux-row style="height: 50px;">
<ux-transition :show="fadeZoomShow" mode="fade-zoom" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="上滑淡入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playFadeUp"></ux-button>
</template>
<ux-row style="height: 50px;">
<ux-transition :show="fadeUpShow" mode="fade-up" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="下滑淡入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playFadeDown"></ux-button>
</template>
<ux-row style="height: 50px;">
<ux-transition :show="fadeDownShow" mode="fade-down" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="左滑淡入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playFadeLeft"></ux-button>
</template>
<ux-row style="height: 50px;">
<ux-transition :show="fadeLeftShow" mode="fade-left" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="右滑淡入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playFadeRight"></ux-button>
</template>
<ux-row style="width: 200px; height: 50px;">
<ux-transition :show="fadeRightShow" mode="fade-right" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="上滑进入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playSlideUp"></ux-button>
</template>
<ux-row style="width: 200px; height: 50px;">
<ux-transition :show="slideUpShow" mode="slide-up" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="下滑进入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playSlideDown"></ux-button>
</template>
<ux-row style="width: 200px; height: 50px;">
<ux-transition :show="slideDownShow" mode="slide-down" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="左滑进入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playSlideLeft"></ux-button>
</template>
<ux-row style="width: 200px; height: 50px;">
<ux-transition :show="slideLeftShow" mode="slide-left" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="右滑进入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playSlideRight"></ux-button>
</template>
<ux-row style="width: 200px; height: 50px;">
<ux-transition :show="slideRightShow" mode="slide-right" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :bold="true">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag-filled" title="过渡动画" :bold="true">
<ux-text text="支持淡入、缩放、缩放淡入、上滑淡入、下滑淡入、左滑淡入、右滑淡入、上滑进入、下滑进入、左滑进入、右滑进入等动画方式"></ux-text>
</ux-card>
<ux-card direction="column" icon="arrowright" title="淡入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playFade"></ux-button>
</template>
<ux-row style="height: 50px;">
<ux-transition :show="fadeShow" mode="fade" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="缩放" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playZoom"></ux-button>
</template>
<ux-row style="height: 50px;">
<ux-transition :show="zoomShow" mode="zoom" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="缩放淡入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playFadeZoom"></ux-button>
</template>
<ux-row style="height: 50px;">
<ux-transition :show="fadeZoomShow" mode="fade-zoom" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="上滑淡入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playFadeUp"></ux-button>
</template>
<ux-row style="height: 50px;">
<ux-transition :show="fadeUpShow" mode="fade-up" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="下滑淡入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playFadeDown"></ux-button>
</template>
<ux-row style="height: 50px;">
<ux-transition :show="fadeDownShow" mode="fade-down" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="左滑淡入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playFadeLeft"></ux-button>
</template>
<ux-row style="height: 50px;">
<ux-transition :show="fadeLeftShow" mode="fade-left" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="右滑淡入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playFadeRight"></ux-button>
</template>
<ux-row style="width: 200px; height: 50px;">
<ux-transition :show="fadeRightShow" mode="fade-right" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="上滑进入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playSlideUp"></ux-button>
</template>
<ux-row style="width: 200px; height: 50px;">
<ux-transition :show="slideUpShow" mode="slide-up" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="下滑进入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playSlideDown"></ux-button>
</template>
<ux-row style="width: 200px; height: 50px;">
<ux-transition :show="slideDownShow" mode="slide-down" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="左滑进入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playSlideLeft"></ux-button>
</template>
<ux-row style="width: 200px; height: 50px;">
<ux-transition :show="slideLeftShow" mode="slide-left" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="右滑进入" :bold="true">
<template v-slot:subtitle>
<ux-button theme="primary" text="播放动画" :size="12" :ml="10" @click="playSlideRight"></ux-button>
</template>
<ux-row style="width: 200px; height: 50px;">
<ux-transition :show="slideRightShow" mode="slide-right" :duration="duration">
<view class="item"></view>
</ux-transition>
</ux-row>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
import * as plus from '@/uni_modules/ux-plus'
const title = ref('')
const fadeShow = ref(false)
const zoomShow = ref(false)
const fadeZoomShow = ref(false)
const fadeUpShow = ref(false)
const fadeDownShow = ref(false)
const fadeLeftShow = ref(false)
const fadeRightShow = ref(false)
const slideUpShow = ref(false)
const slideDownShow = ref(false)
const slideLeftShow = ref(false)
const slideRightShow = ref(false)
const duration = 500
let timer = 0
onLoad((e: OnLoadOptions) => {
title.value = e['title'] ?? ''
})
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/transition.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
function playFade() {
fadeShow.value = false
clearTimeout(timer)
nextTick(() => {
fadeShow.value = true
timer = setTimeout(() => {
fadeShow.value = false
}, duration)
})
}
function playZoom() {
zoomShow.value = false
clearTimeout(timer)
nextTick(() => {
zoomShow.value = true
timer = setTimeout(() => {
zoomShow.value = false
}, duration)
})
}
function playFadeZoom() {
fadeZoomShow.value = false
clearTimeout(timer)
nextTick(() => {
fadeZoomShow.value = true
timer = setTimeout(() => {
fadeZoomShow.value = false
}, duration)
})
}
function playFadeUp() {
fadeUpShow.value = false
clearTimeout(timer)
nextTick(() => {
fadeUpShow.value = true
timer = setTimeout(() => {
fadeUpShow.value = false
}, duration)
})
}
function playFadeDown() {
fadeDownShow.value = false
clearTimeout(timer)
nextTick(() => {
fadeDownShow.value = true
timer = setTimeout(() => {
fadeDownShow.value = false
}, duration)
})
}
function playFadeLeft() {
fadeLeftShow.value = false
clearTimeout(timer)
nextTick(() => {
fadeLeftShow.value = true
timer = setTimeout(() => {
fadeLeftShow.value = false
}, duration)
})
}
function playFadeRight() {
fadeRightShow.value = false
clearTimeout(timer)
nextTick(() => {
fadeRightShow.value = true
timer = setTimeout(() => {
fadeRightShow.value = false
}, duration)
})
}
function playSlideUp() {
slideUpShow.value = false
clearTimeout(timer)
nextTick(() => {
slideUpShow.value = true
timer = setTimeout(() => {
slideUpShow.value = false
}, duration)
})
}
function playSlideDown() {
slideDownShow.value = false
clearTimeout(timer)
nextTick(() => {
slideDownShow.value = true
timer = setTimeout(() => {
slideDownShow.value = false
}, duration)
})
}
function playSlideLeft() {
slideLeftShow.value = false
clearTimeout(timer)
nextTick(() => {
slideLeftShow.value = true
timer = setTimeout(() => {
slideLeftShow.value = false
}, duration)
})
}
function playSlideRight() {
slideRightShow.value = false
clearTimeout(timer)
nextTick(() => {
slideRightShow.value = true
timer = setTimeout(() => {
slideRightShow.value = false
}, duration)
})
}
</script><script setup>
import * as plus from '@/uni_modules/ux-plus'
const title = ref('')
const fadeShow = ref(false)
const zoomShow = ref(false)
const fadeZoomShow = ref(false)
const fadeUpShow = ref(false)
const fadeDownShow = ref(false)
const fadeLeftShow = ref(false)
const fadeRightShow = ref(false)
const slideUpShow = ref(false)
const slideDownShow = ref(false)
const slideLeftShow = ref(false)
const slideRightShow = ref(false)
const duration = 500
let timer = 0
onLoad((e: OnLoadOptions) => {
title.value = e['title'] ?? ''
})
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/transition.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
function playFade() {
fadeShow.value = false
clearTimeout(timer)
nextTick(() => {
fadeShow.value = true
timer = setTimeout(() => {
fadeShow.value = false
}, duration)
})
}
function playZoom() {
zoomShow.value = false
clearTimeout(timer)
nextTick(() => {
zoomShow.value = true
timer = setTimeout(() => {
zoomShow.value = false
}, duration)
})
}
function playFadeZoom() {
fadeZoomShow.value = false
clearTimeout(timer)
nextTick(() => {
fadeZoomShow.value = true
timer = setTimeout(() => {
fadeZoomShow.value = false
}, duration)
})
}
function playFadeUp() {
fadeUpShow.value = false
clearTimeout(timer)
nextTick(() => {
fadeUpShow.value = true
timer = setTimeout(() => {
fadeUpShow.value = false
}, duration)
})
}
function playFadeDown() {
fadeDownShow.value = false
clearTimeout(timer)
nextTick(() => {
fadeDownShow.value = true
timer = setTimeout(() => {
fadeDownShow.value = false
}, duration)
})
}
function playFadeLeft() {
fadeLeftShow.value = false
clearTimeout(timer)
nextTick(() => {
fadeLeftShow.value = true
timer = setTimeout(() => {
fadeLeftShow.value = false
}, duration)
})
}
function playFadeRight() {
fadeRightShow.value = false
clearTimeout(timer)
nextTick(() => {
fadeRightShow.value = true
timer = setTimeout(() => {
fadeRightShow.value = false
}, duration)
})
}
function playSlideUp() {
slideUpShow.value = false
clearTimeout(timer)
nextTick(() => {
slideUpShow.value = true
timer = setTimeout(() => {
slideUpShow.value = false
}, duration)
})
}
function playSlideDown() {
slideDownShow.value = false
clearTimeout(timer)
nextTick(() => {
slideDownShow.value = true
timer = setTimeout(() => {
slideDownShow.value = false
}, duration)
})
}
function playSlideLeft() {
slideLeftShow.value = false
clearTimeout(timer)
nextTick(() => {
slideLeftShow.value = true
timer = setTimeout(() => {
slideLeftShow.value = false
}, duration)
})
}
function playSlideRight() {
slideRightShow.value = false
clearTimeout(timer)
nextTick(() => {
slideRightShow.value = true
timer = setTimeout(() => {
slideRightShow.value = false
}, duration)
})
}
</script>css
<style lang="scss">
.item {
width: 200px;
height: 50px;
background-color: #00a900;
}
</style><style lang="scss">
.item {
width: 200px;
height: 50px;
background-color: #00a900;
}
</style>