uniapp动画进入和离开
时间: 2023-09-09 15:12:12 浏览: 43
在uni-app中,可以通过使用uni-app提供的动画组件`<animation>`来实现进入和离开动画。
1. 进入动画
在页面中,可以通过在元素上绑定`animation`属性来实现页面进入时的动画效果。例如,可以在`onLoad`生命周期函数中设置一个定时器,用于延迟执行动画,如下所示:
```html
<template>
<view class="container" animation="{{animationData}}" wx:if="{{show}}">
<view class="content">
Hello, World!
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
animationData: {}
}
},
onLoad() {
setTimeout(() => {
this.setData({
show: true,
animationData: uni.createAnimation({
duration: 1000,
timingFunction: 'ease',
delay: 0,
transformOrigin: '50% 50%',
translateY: '100vh'
}).step().export()
})
}, 500)
}
}
</script>
```
在上面的代码中,我们通过在`<view>`元素上绑定`animation`属性来实现进入动画效果。在页面`onLoad`生命周期函数中,我们设置了一个定时器,用于延迟执行动画。在定时器中,我们通过`uni.createAnimation()`方法创建了一个动画实例,并设置了动画的属性,如`duration`动画时长、`timingFunction`动画时间函数、`delay`动画延迟时间、`transformOrigin`动画变换基点和`translateY`动画垂直方向的位移量。
2. 离开动画
在uni-app中,可以通过在`onUnload`生命周期函数中设置动画来实现页面离开时的动画效果。例如,我们可以在`onUnload`函数中创建一个动画实例,并设置动画的属性,如下所示:
```html
<template>
<view class="container">
<view class="content">
Hello, World!
</view>
</view>
</template>
<script>
export default {
onUnload() {
uni.createAnimation({
duration: 1000,
timingFunction: 'ease',
delay: 0,
transformOrigin: '50% 50%',
translateY: '100vh'
}).step().export()
}
}
</script>
```
在上面的代码中,我们在`onUnload`函数中创建了一个动画实例,并设置了动画的属性,如`duration`动画时长、`timingFunction`动画时间函数、`delay`动画延迟时间、`transformOrigin`动画变换基点和`translateY`动画垂直方向的位移量。最后,我们通过`export()`方法将动画导出并执行,从而实现页面离开时的动画效果。