当前位置：首页 > VUE

vue实现半场动画

2026-02-18 05:32:54VUE

Vue 实现半场动画的方法

在 Vue 中实现半场动画（即动画只执行到一半或特定状态后停止）可以通过以下几种方式实现：

使用 CSS 动画配合 Vue 的过渡类名

通过 Vue 的 <transition> 组件结合 CSS 动画，可以控制动画的播放进度。例如，通过 animation-iteration-count 或 animation-fill-mode 控制动画停止在中间状态。

<transition name="half-animation">
  <div v-if="show">内容</div>
</transition>

.half-animation-enter-active {
  animation: slide-in 0.5s;
  animation-fill-mode: forwards;
}

@keyframes slide-in {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

通过调整 @keyframes 的百分比或 animation-fill-mode，可以让动画停在中间状态。

使用 JavaScript 动画库（如 GSAP）

GSAP 提供了更精细的动画控制，可以精确指定动画的进度或停止位置。

<template>
  <div ref="box" class="box"></div>
</template>

<script>
import { gsap } from 'gsap';

export default {
  mounted() {
    gsap.to(this.$refs.box, {
      x: 100,
      duration: 1,
      onComplete: () => {
        // 动画完成后可以手动调整到中间状态
        gsap.set(this.$refs.box, { x: 50 });
      }
    });
  }
};
</script>

使用 Vue 的过渡钩子

通过 Vue 的过渡钩子（如 @before-enter、@enter），可以在动画执行过程中手动控制动画进度。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  v-bind:css="false"
>
  <div v-if="show">内容</div>
</transition>

methods: {
  beforeEnter(el) {
    el.style.opacity = 0;
  },
  enter(el, done) {
    const animation = el.animate(
      [
        { opacity: 0, transform: 'translateX(-100%)' },
        { opacity: 1, transform: 'translateX(0)' }
      ],
      { duration: 1000 }
    );
    animation.onfinish = () => {
      // 手动停止在中间状态
      el.style.transform = 'translateX(-50%)';
      done();
    };
  }
}

使用动态样式绑定

通过 Vue 的动态样式绑定，可以手动控制动画的进度。

vue实现半场动画

<template>
  <div :style="animationStyle" class="box"></div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    };
  },
  computed: {
    animationStyle() {
      return {
        transform: `translateX(${this.progress * 50}%)`
      };
    }
  },
  mounted() {
    // 手动控制动画进度
    const interval = setInterval(() => {
      this.progress += 0.1;
      if (this.progress >= 0.5) {
        clearInterval(interval);
      }
    }, 100);
  }
};
</script>