＜transition＞标签的使用

参考;https://blog.csdn.net/weixin_43853746/article/details/107051185vue提供的wrapper包装组件——transition，在包裹的元素中，有涉及到v-if，,v-show, 动态组件,组件根节点,，都会给它们添加进入/离开的过渡效果。。name属性值：fade 淡入淡出提供 el-fade-in-linear 和 el-fade

qq_46302247

4710人浏览 · 2022-05-12 11:35:44

qq_46302247 · 2022-05-12 11:35:44 发布

参考：https://blog.csdn.net/weixin_43853746/article/details/107051185
参考：https://blog.csdn.net/Hello__World123/article/details/100741349

＜transition＞动画效果

<template>
  <div class="profile">
    <button @click="flag=!flag">显示/隐藏</button>
    //加上appear属性，一进入页面就会有动画效果
    <transition name="aa" appear>
      <h1 v-show="flag">我是profile</h1>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true
    }
  }
}
</script>
<style scoped>
 h1 {
   background: blueviolet;
  }
  
//flag为true时，会自动给h1标签加上.aa-enter-active
 .aa-enter-active {
   animation: aniName 0.5s linear
 }
 
// flag为false时，会自动给h1标签加上.aa-leave-active
 .aa-leave-active {
   animation: aniName 0.5s linear reverse
 }

 @keyframes aniName {
   from {
     transform: translateX(-100%);
   }
   to {
    transform: translateX(0);
   }
 }
</style>

＜transition＞过度效果

<template>
  <div class="profile">
    <button @click="flag=!flag">显示/隐藏</button>
    <transition name="aa" appear>
      <h1 v-show="flag">我是profile</h1>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true
    }
  }
}
</script>
<style scoped>
 h1 {
   background: blueviolet;
   transition: transform 0.5s linear;
  }
//进入的起点，离开的终点
 .aa-enter, .aa-leave-to {
   transform: translateX(-100%);
 }
//进入的终点，离开的起点
 .aa-enter-to, .aa-leave{
   transform: translateX(0);
 }
</style>

注意：.aa-enter 和 .aa-leave 都是在flag值变化的一刹那加上，然后马上去掉了
另外：＜transition＞只能放一个元素，如果有多个元素需要用到

集成第三方动画
第三方动画animate.css：https://animate.style/

$ npm install animate.css --save

<template>
  <div class="profile">
    <button @click="flag=!flag">显示/隐藏</button>
    <transition
    appear
    //固定写法
    name="animate__animated animate__bounce"
    //类名去官网自己复制
    enter-active-class="animate__tada"
    leave-active-class="animate__backOutDown"
    >
      <h1 v-show="flag" >我是profile2</h1>
    </transition>
  </div>
</template>

<script>
//导入包（在node_modules下）
import 'animate.css';
export default {
  data() {
    return {
      flag: true
    }
  }
}
</script>
<style scoped>
 h1 {
   background: blueviolet;
  }
</style>

--------------------------分隔符----------------------

<template>
  <div class="demo1">
    <div class="main">
      <div class="left">
        <transition name="leftTransitionOut">
          <img
            src="@/assets/images/handleOut1.png"
            alt=""
            v-show="showLeft"
            v-on:click="showLeft = !showLeft"
          />
        </transition>
      </div>

      <div class="center">
        <transition name="leftContain">
          <div class="left_contain" v-show="!showLeft"></div>
        </transition>
      </div>

      <div class="right">
        <transition name="leftTransitionIn">
          <img
            src="@/assets/images/handleIn1.png"
            alt=""
            v-show="!showLeft"
            v-on:click="showLeft = !showLeft"
          />
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showLeft: true,
    };
  },
  created() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.demo1 {
  .main {
    height: 1000px;
    position: relative;
    .left {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      // .leftTransitionOut-leave 省略了，离开的最初状态也是元素本身的样式，所以是没有必要写的
      //左侧图片：向左滑动隐藏
      .leftTransitionOut-leave-active {
        transition: all 1s;
      }
      .leftTransitionOut-leave-to {
        //离开的结束状态
        margin-left: -88px; //左侧图片的宽度
        opacity: 0;
      }
      //左侧图片：向右滑动显示
      .leftTransitionOut-enter {
        //进入的初始状态
        margin-left: -88px;
        opacity: 0;
      }
      .leftTransitionOut-enter-active {
        transition: all 1s;
      }
      .leftTransitionOut-enter-to {
        //进入的结束状态
        margin-left: 0px;
        opacity: 1;
      }
    }

    .center {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      //中间的div：向右滑动显示
      .leftContain-enter {
        // 进入的初始状态
        opacity: 0;
        margin-left: -300px; //.left_contain的width
      }
      .leftContain-enter-active {
        transition: all 1s;
      }
      .leftContain-enter-to {
        //进入的结束状态
        opacity: 1;
        margin-left: 0px; //因为用的是绝对定位，所以不用考虑左侧图片的宽度
      }

      // .leftContain-leave 省略了，离开的最初状态 也是 进入的结束状态，所以是没有必要写的
      //中间的div：向左滑动隐藏
      .leftContain-leave-active {
        transition: all 1s;
      }
      .leftContain-leave-to {
        //离开的结束状态
        opacity: 0;
        margin-left: -300px;
      }

      .left_contain {
        width: 300px;
        height: 600px;
        background: #bfa;
      }
    }

    .right {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 300px;
      //右侧图片：向右滑动显示
      .leftTransitionIn-enter {
        // 进入的初始状态
        opacity: 0;
        margin-left: -400px;
      }
      .leftTransitionIn-enter-active {
        transition: all 1s;
      }
      .leftTransitionIn-enter-to {
        //进入的结束状态
        opacity: 1;
        margin-left: 0px; //因为用的是绝对定位，所以不用考虑左侧元素的宽度
      }

      // .leftTransitionIn-leave 省略了，离开的最初状态 也是 进入的结束状态，所以是没有必要写的
      //中间的div：向左滑动隐藏
      .leftTransitionIn-leave-active {
        transition: all 1s;
      }
      .leftTransitionIn-leave-to {
        //离开的结束状态
        opacity: 0;
        margin-left: -400px;
      }
    }
  }
}
</style>

在这里插入图片描述

vue提供的wrapper包装组件——transition，在包裹的元素中，有涉及到v-if，,v-show, 动态组件,组件根节点,，都会给它们添加进入/离开的过渡效果。。

name属性值：

fade 淡入淡出
提供 el-fade-in-linear 和 el-fade-in 两种效果。

zoom 缩放
提供 el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom 三种效果。

举例：

<el-button type="success" @click="showTable = true">点我展开</el-button>
<transition name="el-zoom-in-top">
  <el-table
    v-show="showTable"
    :data="tableData"
    style="width: 100%; margin-top: 20px"
  >
    <el-table-column prop="id" label="ID" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
    <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
    <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
    <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
  </el-table>
</transition>

在这里插入图片描述