VUE学习：vue基础22————动画04：动画练习

最新推荐文章于 2025-12-10 17:41:45 发布

原创最新推荐文章于 2025-12-10 17:41:45 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

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

29 篇文章

订阅专栏

新星计划

15 篇文章

订阅专栏

本文详细介绍了在Vue中实现组件切换动画的步骤，通过CSS和Vue的过渡组件，创建了平滑的页面过渡效果。示例包括设置标题、组件页和标签栏，展示了如何结合使用`<transition>`标签和Vue的动画类来控制组件进入和离开的动画。文章还提供了具体的HTML、CSS和JavaScript代码，帮助读者理解和应用Vue的动画机制。

提示：
VUE学习：vue基础22————动画04：动画练习

前言

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

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

动画

动画练习

组件切换案例

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
   <style>
      *{
         margin: 0;
         padding: 0;
      }
      html,body,#app{
         height: 100%;
         overflow: hidden;
      }
      .title{
         height: 60px;
         background-color: #333;
         color: #fff;
         text-align: center;
         font-size: 24px;
         line-height: 60px;
      }
      .page{
         /*calc()函数是css的计算属性，可以在小括号内进行基础的数值运算*/
         height: calc(100% - 60px - 40px);
      }
      .tabs{
         height: 50px;
         line-height: 30px;
         text-align: center;
         background-color: #333;
         color: #fff;
         position: relative;
      }
      .tabs-item{
         float: left;
         width: 25%;
      }
      .tabs-active{
         position: absolute;
         width: 25%;
         height: 100%;
         background-color: #000;
         color: #fff;
         left: 0;
         top: 0;
         transition: all .3s;
      }

      /*vue过渡样式*/
      .v-enter-active,.v-leave-active{
         transition: all .3s;
      }
      .v-enter-to,.v-leave{
         transform: translate(0);
      }
      .v-enter{
         transform: translate(100%);
      }
   </style>
</head>
<body>
<div id="app">
   <div class="title">{{title}}</div>
   <transition mode="out-in">
      <component :is="nowPage"></component>
   </transition>
   <div class="tabs">
      <div class="tabs-item" v-for="(tab,index) in tabList" :key="index"
           @click="change(index,tab.content,tab.page)">{{tab.content}}</div>
      <div class="tabs-active" :style="{'left':left}">{{title}}</div>
   </div>
</div>

<template id="home">
   <div style="background-color: pink" class="page">首页</div>
</template>
<template id="news">
   <div style="background-color: green" class="page">新闻</div>
</template>
<template id="mine">
   <div style="background-color: yellow" class="page">我的</div>
</template>
<template id="about">
   <div style="background-color: blue" class="page">关于</div>
</template>
</body>
<script>
   let vm = new Vue({
      el: "#app",
      data: {
         tabList:[
            {color:"pink",content:"首页",page:"home"},
            {color:"green",content:"新闻",page:"news"},
            {color:"yellow",content:"我的",page:"mine"},
            {color:"blue",content:"关于",page:"about"}
         ],
         nowPage:"home",
         title:"首页",
         left:0
      },
      methods: {
         change(index,content,page){
            this.nowPage=page;
            this.title=content;
            this.left=(index*25)+"%";
         }
      },
      components:{
         home:{
            template:"#home"
         },
         news:{
            template:"#news"
         },
         mine:{
            template:"#mine"
         },
         about:{
            template:"#about"
         }
      }

   });
</script>

在这里插入图片描述