一，官方文档地址:
https://uniapp.dcloud.net.cn/component/uniui/uni-transition.html
二，代码：
<template>
<view>
<view class="animation-element-wrapper">
<uni-transition :duration="1500" ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
:show="show"><text class="text">示例元素</text></uni-transition>
</view>
<scroll-view class="animation-buttons" scroll-y="true">
<view style="display: flex;flex-direction: row;">
<button class="animation-button" @tap="goFadeOut">淡出</button>
<button class="animation-button" @tap="goFadeIn">淡入</button>
</view>
<view style="display: flex;flex-direction: row;">
<button class="animation-button" @tap="fromTopToBottom">由上至下</button>
<button class="animation-button" @tap="fromBottomToTop">由下至上</button>
</view>
<view style="display: flex;flex-direction: row;">
<button class="animation-button" @tap="fromRightToLeft">由右至左</button>
<button class="animation-button" @tap="fromLeftToRight">由左至右</button>
</view>
<view style="display: flex;flex-direction: row;">
<button class="animation-button" @tap="magnify">放大</button>
<button class="animation-button" @tap="reduce">缩小</button>
</view>
<view style="display: flex;flex-direction: row;">
<button class="animation-button" @tap="rotateLeft">向左旋转</button>
<button class="animation-button" @tap="rotateRight">向右旋转</button>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
show: true,
modeClass: 'fade',
styles: {},
}
},
onl oad() {
// #ifdef APP-NVUE
this.styles = {
justifyContent: 'center',
alignItems: 'center',
width: '100px',
height: '100px',
borderRadius: '5px',
textAlign: 'center',
backgroundColor: '#4cd964',
boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)',
}
// #endif
},
methods: {
goFadeOut:function () {
this.$refs.ani.step({
opacity: '0',
//rotate: '0'
},{
timingFunction: 'ease-in',
duration: 1200
});
// 开始执行动画
this.$refs.ani.run(()=>{
console.log('动画支持完毕')
});
},
goFadeIn:function () {
this.$refs.ani.step({
opacity: '1',
//rotate: '0'
},{
timingFunction: 'ease-in',
duration: 1200
});
// 开始执行动画
this.$refs.ani.run(()=>{
console.log('动画支持完毕')
});
},
fromTopToBottom:function(){
this.$refs.ani.step({
translateY: '100px',
//rotate: '0'
},{
timingFunction: 'ease-in',
duration: 1200
});
// 开始执行动画
this.$refs.ani.run(()=>{
console.log('动画支持完毕')
});
},
fromBottomToTop:function(){
this.$refs.ani.step({
translateY: '-100px',
},{
timingFunction: 'ease-in',
duration: 1200
});
// 开始执行动画
this.$refs.ani.run(()=>{
console.log('动画支持完毕')
});
},
fromRightToLeft:function(){
this.$refs.ani.step({
translateX: '-100px',
},{
timingFunction: 'ease-in',
duration: 1200
});
// 开始执行动画
this.$refs.ani.run(()=>{
console.log('动画支持完毕')
});
},
fromLeftToRight:function(){
this.$refs.ani.step({
translateX: '100px',
},{
timingFunction: 'ease-in',
duration: 1200
});
// 开始执行动画
this.$refs.ani.run(()=>{
console.log('动画支持完毕')
});
},
magnify:function() {
this.$refs.ani.step({
scale: '1.5',
},{
timingFunction: 'ease-in',
duration: 1200
});
// 开始执行动画
this.$refs.ani.run(()=>{
console.log('动画支持完毕')
});
},
reduce:function() {
this.$refs.ani.step({
scale: '1',
//rotate: '0'
},{
timingFunction: 'ease-in',
duration: 1200
});
// 开始执行动画
this.$refs.ani.run(()=>{
console.log('动画支持完毕')
});
},
rotateLeft:function(){
this.$refs.ani.step({
rotate: '-90'
},
{
timingFunction: 'ease-in',
duration: 1200
});
// 开始执行动画
this.$refs.ani.run(()=>{
console.log('动画支持完毕')
});
},
rotateRight:function(){
this.$refs.ani.step({
rotate: '0'
},{
timingFunction: 'ease-in',
duration: 1200
});
// 开始执行动画
this.$refs.ani.run(()=>{
console.log('动画支持完毕')
});
}
}
}
</script>
<style>
.animation-element-wrapper {
display: flex;
width: 750rpx;
height: 550rpx;
padding-top: 150rpx;
padding-bottom: 150rpx;
flex-direction: row;
justify-content: center;
overflow: hidden;
background-color: #ffffff;
}
.animation-element {
width: 200rpx;
height: 200rpx;
background-color: #1AAD19;
}
.animation-buttons {
padding:30rpx 0;
width: 750rpx;
/* height: 360rpx; */
}
.animation-button {
float: left;
width: 340rpx;
margin: 15rpx 15rpx;
}
.transition{
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border-radius: 5px;
text-align: center;
background-color: #4cd964;
box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
}
</style>
说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: [email protected]
三，测试效果:
四，查看hbuilderx的版本:
标签：动画,ease,console,18,app,ani,duration,uni,refs
From： https://www.cnblogs.com/architectforest/p/17142028.html