vue实现页面切入淡入淡出、文字淡入淡出效果＜transition＞标签

最新推荐文章于 2024-09-11 22:01:20 发布

Krlin_

最新推荐文章于 2024-09-11 22:01:20 发布

阅读量5.4k

点赞数 1

分类专栏：学习文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_46353030/article/details/122087745

版权

本文介绍了如何在 Vue 中利用 `<transition>` 标签实现页面切入时的淡入淡出效果和文字的淡入淡出。条件包括条件渲染（v-if/v-show）、动态组件和组件根节点。通过遵循配置路由和引用官方文档的步骤，可以成功实现页面内容的平滑过渡。

摘要由CSDN通过智能技术生成

二、使用条件

满足以下条件之一

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

三、使用步骤

文字淡入淡出效果使用步骤

<template>
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
</template>
<script>
new Vue({
   
  el: '#demo',
  data: {
   
    show: true
  }
})
</script