VUE学习：vue基础21————动画03：多种类型过渡

最新推荐文章于 2024-06-28 11:31:39 发布

北凉冬

最新推荐文章于 2024-06-28 11:31:39 发布

阅读量103

点赞数

分类专栏：新星计划 vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/117412603

版权

vue.js 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

新星计划

15 篇文章 0 订阅

订阅专栏

本文介绍了Vue动画的三种关键应用：多标签间的out-in和in-out过渡，组件之间的无缝切换，以及列表渲染时的过渡效果。通过实例演示了如何在Vue项目中实现这些过渡，并提供了相应的CSS样式和组件配置。

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

提示：
VUE学习：vue基础21————动画03：多种类型过渡

前言

本文学习Vue的动画相关内容。

提示：以下是本篇文章正文内容，下面案例可供参考

动画

多种类型过渡

多标签过渡

过渡模式：

in-out表示新元素先过渡，完成后当前元素再消失。

out-in当前元素先过渡，新元素再进入。

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
   <style>
      .v-enter-active,.v-leave-active{
         transition: all 2s;
      }
      .v-enter,.v-leave-to{
         opacity: 0;
      }
   </style>
</head>
<body>
<div id="app">
   <transition mode="out-in">
      <!--过渡元素中的if和else中一定要设置不同的key去要求Vue来强制刷新，否则只能切换显示，不能把过渡效果展示出来-->
      <button type="button" v-if="show" @click="show=false" key="show">显示</button>
      <button type="button" v-else @click="show=true" key="hide">隐藏</button>
   </transition>
</div>
</body>
<script>
   let vm = new Vue({
      el: "#app",
      data: {
         show:true
      },
      methods: {}
   });
</script>

在这里插入图片描述

多组件过渡

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
   <style>
      .v-enter-active,.v-leave-active{
         transition: all 1s;
      }
      .v-enter,.v-leave-to{
         opacity: 0;
      }
      .v-enter-to,.v-leave{
         opacity: 1;
      }
   </style>
</head>
<body>
<div id="app">
   <button type="button" @click="view='news'">新闻</button>
   <button type="button" @click="view='info'">信息</button>
   <transition mode="out-in">
      <component :is="view"></component>
   </transition>
</div>
</body>
<script>

   let news={
      template:'<div><h3>这里是新闻页</h3></div>'
   }
   let info={
      template: '<div><h3>信息发布</h3></div>'
   }
   let vm = new Vue({
      el: "#app",
      data: {
         view:'news'
      },
      methods: {},
      components:{news,info}
   });
</script>

在这里插入图片描述

列表过渡

transition-group是专门针对列表渲染的过渡效果使用的，只是名字上略有不同，和transition的使用上一致

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
   <style>
      .v-enter-active,.v-leave-active{
         transition: all 1s;
      }
      .v-enter,.v-leave-to{
         opacity: 0;
         transform: translateY(20px);
      }
      b{
         margin-right: 10px;
         display: inline-block;
      }
   </style>
</head>
<body>
<div id="app">
   <div>
      <button type="button" @click="add">添加数字</button>
      <button type="button" @click="remove">删除数字</button>
   </div>
   <div>
      <!--transition-group是专门针对列表渲染的过渡效果使用的，只是名字上略有不同，和transition的使用上一致-->
      <transition-group>
         <b v-for="num in arr" :key="num">{{num}}</b>
      </transition-group>
   </div>
</div>
</body>

<script>
   let vm = new Vue({
      el: "#app",
      data: {
         arr:[1,2,3,4,5,6,7],
         nextNum:8
      },
      methods: {
         add(){
            this.arr.push(this.nextNum++);
         },
         remove(){
            let index=Math.floor(this.arr.length/2);
            this.arr.splice(index,1);
         }
      }
   });
</script>