uniapp 滑动动画
uniapp 实现滑动动画的方法
使用 CSS transition 实现滑动
在 style 中定义动画样式，利用 transition 属性实现平滑过渡效果。例如：
.slide-item {
transition: transform 0.3s ease;
}
.slide-active {
transform: translateX(100px);
}通过动态切换类名触发动画：
<view :class="['slide-item', isActive ? 'slide-active' : '']" @click="toggleSlide"></view>export default {
data() {
return {
isActive: false
}
},
methods: {
toggleSlide() {
this.isActive = !this.isActive
}
}
}使用 animation 动画
通过 CSS @keyframes 定义动画关键帧：
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-animation {
animation: slideIn 0.5s forwards;
}在模板中应用动画类：
<view class="slide-animation"></view>使用 uni.createAnimation API
uniapp 提供的动画 API 更灵活可控：
const animation = uni.createAnimation({
duration: 1000,
timingFunction: 'ease'
})
this.animation = animation
animation.translateX(100).step()
this.animationData = animation.export()模板中绑定动画数据：
<view :animation="animationData"></view>手势滑动组件实现
使用 movable-area 和 movable-view 组件实现拖拽滑动：
<movable-area style="width: 100%; height: 200px;">
<movable-view
direction="horizontal"
inertia
@change="onChange"
style="width: 100px; height: 100px;">
可拖动区域
</movable-view>
</movable-area>第三方动画库
引入 animate.css 等库快速实现预置动画：
- 将 animate.css 放入 static 目录
- 在 App.vue 中全局引入：
@import "/static/animate.css"; - 在组件中使用：
<view class="animate__animated animate__slideInLeft"></view>
性能优化建议
避免在滚动事件中频繁触发动画，推荐使用 Intersection Observer API 实现滚动视差效果。对于复杂动画序列，建议使用 CSS 动画而非 JavaScript 持续修改样式，以减少重绘开销。
