vue脚手架动画和配置animate.css实现过渡动画

<template>
  <div>
      <p>我是组件2</p>
          <button @click="isShow = !isShow">显示与隐藏</button>
        <transition>
            <div class="box" v-show="isShow"></div>
        </transition>
  </div>
</template>

<script>
export default {
    name:"zujians",
    data() {
        return {
            //设置动画是否执行
            isShow:true
        };
    },
}
</script>

<style lang="less" scoped>
.box{
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: red;
        top: 40px;
        
    }
    /* 
        .box
        离开：从20-> 300 消失
        进入：从300-> 20 显示
        也可以结合透明度
     */
     
     .v-leave,.v-enter-to{
        left:20px;
        // opacity: 1;
        
     }
     //过度事件
     .v-leave-active,.v-enter-active{
         transition: all 1.5s;
     }
     
     .v-leave-to,.v-enter{
         left: 300px;
        //  opacity: 0;
         background-color: green;
     }
</style>

.v-enter            #动画进入时的状态
.v-enter-active     #动画激活时的状态
.v-enter-to         #动画进入结束时的状态
​
.v-leave            #动画离开时的状态
.v-leave-active     #动画离开激活时的状态
.v-leave-to         #动画离开结束时的状态

如果你给动画transtion设置名字，比如：

如果没有设置名字，默认的v，如果设置名字就是name-过度

<template>
  <div>
      <p>我是组件2</p>
          <button @click="isShow = !isShow">显示与隐藏</button>
        <transition name= "donghua">
            <div class="box" v-show="isShow"></div>
        </transition>
  </div>
</template>

<script>
export default {
    name:"zujians",
    data() {
        return {
            //设置动画是否执行
            isShow:true
        };
    },
}
</script>

<style lang="less" scoped>
.box{
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: red;
        top: 40px;
        
    }
    /* 
        .box
        离开：从20-> 300 消失
        进入：从300-> 20 显示
        也可以结合透明度
     */
     
     .donghua-leave,.donghua-enter-to{
        left:20px;
        height:0;
        // opacity: 1;
        
     }
     
     .donghua-leave-active,.donghua-enter-active{
         transition: all 1.5s;
     }
     
     .donghua-leave-to,.donghua-enter{
         left: 300px;
         height:100px;
        //  opacity: 0;
         background-color: green;
     }
</style>

 

二：配置animate.css实现过渡动画

animate.CSS网址 :Animate.css | A cross-browser library of CSS animations.

中文网：animate.css动画演示_dowebok

注意：去中文复制名称的时候，前面要加 animate__

1，下载对应组件

npm install animate.css

2， 引入script里

import 'animate.css';

enter-active-class:进入激活时的类名  一般用进入的
 leave-active-class:离开激活时的类名
 
 animate__animated : 是基础类
 animate__backInRight / animate__fadeOutTopLeft

注意：class名中间是两个下划线

        一定要下载对应的animate和js中引入css

        animation-duration:;执行时间

        animation-name:;//动画名

<template>
  <!-- 用vue的transition标签结合css样式完成动画 -->
  <div>
    <button @click="toggle">显示/隐藏</button><br />
    <transition name="show">
      <div class="show one" v-show="isshow">one</div>
    </transition>
    <div class="animate__animated animate__bounce animate__delay-2s">Example</div>
  </div>
  <!-- 如果要使用动画效果:
        第一种方式是使用transition标签加css样式结合完成：
        1.给需要运动的元素加入transition标签
        2.默认情况下如果控制了transition标签元素的显示和隐藏它会默认
        给这个元素加入一些class
            隐藏: 加入类名:
                    v-leave
                    v-leave-active
                    v-leave-to
            显示: 加入类名:
                    v-enter  准备进行运动的状态(起始状态)
                    v-enter-active  整个运动状态
                    v-enter-to  整个运动状态(强调运动的结果，结束状态)
        3.将来如果给transition设置一个name为“show”以后,将来所有的类的名称都需要改变，默认前缀为v-
          如果加入了name属性，需要将v- 改为show- -->
</template>
import 'animate.css';
<script>
export default {
  name: "Dh1",
  data() {
    return {
      isshow: false,
    };
  },
  methods: {
    toggle: function () {
      this.isshow = !this.isshow;
    },
  },
};
</script>

<style lang="less" scoped>
.show-enter-active,
.show-leave-active {
  transition: all 2s;
}

.show-enter,
.show-leave-to {
  margin-left: 100px;
  opacity: 0;
}

.show-enter-to,
.show-leave {
  margin-left: 0px;
  opacity: 1;
}

.one {
  width: 200px;
  height: 200px;
  color: azure;
  line-height: 200px;
  font-size: 40px;
  text-align: center;
  background-color: goldenrod;
}
</style>