uniapp进度条动画过渡

在 Uniapp 中实现进度条动画过渡可以使用 `uni-transition` 组件，结合 CSS3 动画实现。以下是一个简单的示例：

<template>
  <view class="container">
    <uni-transition name="progress-bar">
      <view :style="{width: progress + '%'}" class="progress-bar"></view>
    </uni-transition>
    <button @click="start">Start</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    }
  },
  methods: {
    start() {
      let timer = setInterval(() => {
        this.progress += 10;
        if (this.progress >= 100) {
          clearInterval(timer);
        }
      }, 500);
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.progress-bar {
  height: 20px;
  background-color: #007aff;
}

.progress-bar-enter-active,
.progress-bar-leave-active {
  animation: progress-bar 0.5s ease-in-out;
}

@keyframes progress-bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
</style>

在以上示例中，我们使用了 `uni-transition` 组件将进度条包裹起来，并设置了 `name` 属性为 `progress-bar`。然后在 CSS 样式中定义了 `progress-bar-enter-active` 和 `progress-bar-leave-active` 类名，并分别设置了动画效果。最后，通过监听按钮的点击事件，使用 `setInterval` 定时器来不断更新进度条的宽度，实现进度条动画过渡效果。