vue3进入页面实现动画效果

作者：System 时间：2024年08月15日分类：所有,css3 字数：730

这篇文章距离上次修改已过234天，其中的内容可能已经有所变动。

在Vue 3中，可以使用<transition>元素和CSS动画来实现页面进入时的动画效果。以下是一个简单的示例：

定义CSS动画：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

在Vue 3组件中使用<transition>：

<template>
  <transition name="fade">
    <div v-if="isVisible" class="box">
      页面内容
    </div>
  </transition>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(false);

// 在某个时刻，比如mounted钩子中设置isVisible为true来触发动画
// mounted() {
//   isVisible.value = true;
// }
</script>

<style>
/* 上面定义的CSS动画 */
</style>

在这个例子中，.box元素将会在isVisible从false变为true时通过淡入淡出动画进入页面。你可以在合适的时机（比如页面加载完成后）将isVisible的值设置为true来触发动画。

vue3进入页面实现动画效果

评论已关闭

推荐阅读