当前位置：首页 > VUE

vue不点击实现动画

2026-02-21 11:31:06VUE

Vue 实现非点击触发的动画方法

使用 `v-if` 或 `v-show` 结合生命周期钩子

通过组件的挂载和卸载自动触发动画，适合页面加载或条件渲染场景。

<template>
  <transition name="fade">
    <div v-if="show">内容</div>
  </transition>
</template>

<script>
export default {
  data() {
    return { show: false }
  },
  mounted() {
    this.show = true // 自动触发入场动画
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用 `Intersection Observer API`

当元素进入视口时触发动画，适合滚动展示效果。

<template>
  <div ref="target">
    <transition name="slide">
      <div v-if="isVisible">滚动到此处时显示</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return { isVisible: false }
  },
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      this.isVisible = entries[0].isIntersecting
    })
    observer.observe(this.$refs.target)
  }
}
</script>

使用 CSS `@keyframes` 自动动画

通过纯 CSS 实现无需交互的循环动画。

<template>
  <div class="auto-rotate">旋转元素</div>
</template>

<style>
.auto-rotate {
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

定时器控制动画

通过 setTimeout 或 setInterval 实现延迟动画。

<template>
  <transition name="bounce">
    <div v-if="active">定时显示的内容</div>
  </transition>
</template>

<script>
export default {
  data() {
    return { active: false }
  },
  mounted() {
    setTimeout(() => {
      this.active = true // 3秒后触发动画
    }, 3000)
  }
}
</script>

使用 Vue 的 `transition-group`

列表自动渲染时应用动画效果。

vue不点击实现动画

<template>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </transition-group>
</template>

<script>
export default {
  data() {
    return {
      items: [] // 初始为空
    }
  },
  created() {
    // 模拟异步数据加载
    setTimeout(() => {
      this.items = [
        { id: 1, text: '项目1' },
        { id: 2, text: '项目2' }
      ]
    }, 1000)
  }
}
</script>