uniapp transition动画效果实现方法

在uniapp中如何实现transition动画效果？我尝试用Vue的transition组件但没生效，是否需要特殊配置？有没有跨平台兼容的示例代码可以参考？最好能展示入场、离场和列表动画的实现方法。

2 回复

在uni-app中，可通过<transition>组件或CSS3动画实现过渡效果。使用<transition>包裹元素，结合v-if或v-show控制显示隐藏，通过CSS定义过渡类名（如.v-enter-active）实现动画。也可直接使用animation或transition属性编写CSS动画。


在 UniApp 中，可以通过以下方法实现动画效果：

1. 使用 CSS3 过渡（transition）

通过 CSS 类控制元素属性的变化，实现平滑过渡效果。

示例代码：

<template>
  <view class="box" :class="{ 'animate': isAnimated }" [@click](/user/click)="toggleAnimation">
    点击我触发动画
  </view>
</template>

<script>
export default {
  data() {
    return {
      isAnimated: false
    }
  },
  methods: {
    toggleAnimation() {
      this.isAnimated = !this.isAnimated;
    }
  }
}
</script>

<style>
.box {
  width: 200rpx;
  height: 200rpx;
  background-color: #007AFF;
  transition: all 0.5s ease; /* 过渡属性：所有属性变化持续0.5秒，缓动效果 */
  opacity: 1;
  transform: scale(1);
}

.box.animate {
  opacity: 0.5;
  transform: scale(1.5);
}
</style>

说明：

  • 通过 transition 属性定义过渡效果（如时长、缓动函数）。
  • 切换 isAnimated 状态触发类名变化，实现动画。

2. 使用 uni.createAnimation API

通过 JavaScript 动态创建动画，适用于复杂或交互式动画。

示例代码：

<template>
  <view class="box" :animation="animationData" [@click](/user/click)="startAnimation">
    点击触发动画
  </view>
</template>

<script>
export default {
  data() {
    return {
      animationData: {}
    }
  },
  methods: {
    startAnimation() {
      const animation = uni.createAnimation({
        duration: 1000, // 动画时长（毫秒）
        timingFunction: 'ease' // 缓动函数
      });
      
      animation.opacity(0.5).scale(1.5).step(); // 定义动画属性
      this.animationData = animation.export(); // 导出动画数据
    }
  }
}
</script>

<style>
.box {
  width: 200rpx;
  height: 200rpx;
  background-color: #34C759;
}
</style>

说明：

  • 调用 uni.createAnimation 创建动画对象。
  • 通过链式调用设置属性（如 opacity、scale、rotate 等），最后用 step() 完成定义。
  • 将生成的动画数据绑定到元素的 animation 属性。

3. 使用第三方动画库（如 Animate.css）

引入 CSS 动画库，通过类名快速应用预定义动画。

步骤：

  1. 将 Animate.css 文件放入项目静态目录（如 /static/animate.css）。
  2. 在 App.vue 中全局引入：
    <style>
[@import](/user/import) '/static/animate.css';
</style>
  3. 在组件中使用类名：
    <view class="animate__animated animate__bounce" [@click](/user/click)="triggerAnimation">
  弹跳动画效果
</view>

注意事项：

  • 性能优化：避免过多使用复杂动画，尤其是在低性能设备上。
  • 兼容性：CSS 动画在 Web 和部分小程序中支持良好，但某些平台（如支付宝小程序）可能对部分属性有限制。

根据需求选择合适的方法：简单过渡用 CSS，动态控制用 createAnimation，快速效果用动画库。

回到顶部