vue3使用animates vue animate.css

一：使用animate.css的使用

1.安装npm install animate.css --save

2.在main.js中引入import animate from 'animate.css'

3.组件中使用

<transition name='fade' enter-active-class='animated flash' leave-active-class='animated shake'>
    <p v-show='show'>动画</p>
</transition>
<button @click="handleClick">切换动画</button>

主要是在使用动画的外面嵌套transtion标签，加了name、enter-active-class、leave-active-class这样基本就实现了简单的动画，但是刷新页面并不会有动画，要实现要加appear、appear-active-class来实现初始化动画

<transition name='fade' appear appear-active-class='animated flash' enter-active-class='animated flash' leave-active-class='animated shake'>
    <p v-show='show'>动画</p>
</transition>
<button @click="handleClick">切换动画</button>

这样就实现了刷新页面也有动画。如果想要在动画过程加transition，过度时间，可以这样写：

<transition name='fade' appear appear-active-class='animated flash' enter-active-class='animated flash fade-enter-active' leave-active-class='animated shake fade-leave-active'>
    <p v-show='show'>动画</p>
</transition>
<button @click="handleClick">切换动画</button>

<style scoped="scoped">
    .fade-enter, .fade-leave-to{
        opacity:0;
    }
    .fade-enter-active,.fade-leave-active{
        transition: opacity 3s; 
    }
</style>

这样就实现了3s的过渡时间动画。但是这样有个问题是：我们用的animate.css库中实现flash等的时间是1s，而我们这里写的是3s，以哪个为准呢，vue也不知道，这里我们需要在transition 标签中加type属性，说明是以哪种为准。

<transition name='fade' type='transition' appear appear-active-class='animated flash' enter-active-class='animated flash fade-enter-active' leave-active-class='animated shake fade-leave-active'>
    <p v-show='show'>动画</p>
</transition>
<button @click="handleClick">切换动画</button>

还可以自定义动画时长

<transition :duration='5000' name='fade' appear appear-active-class='animated flash' enter-active-class='animated flash fade-enter-active' leave-active-class='animated shake fade-leave-active'>
    <p v-show='show'>动画</p>
</transition>

复杂一点为：

<transition :duration='{enter:5000,leave:5000}' name='fade' appear appear-active-class='animated flash' enter-active-class='animated flash fade-enter-active' leave-active-class='animated shake fade-leave-active'>
    <p v-show='show'>动画</p>
</transition>

如果页面中是多个元素或组件的过渡，可以参考下面的写法：

1.多个元素

这里没有引入animate.css也可以，注意的是一定要加key值，否则没有效果，因为不加key，vue会在切换时候复用dom，加不同的key可以使得vue不复用dom。在transition标签加mode='in-out'实现了先进入再隐藏。在transition标签加mode='out-in'实现了先隐藏再显示。

<template>
    <div class="toggle_box">
        <transition mode='in-out'>
            <div v-if='show' key='hello'>hello word</div>
            <div v-else key='bye'>bye word</div>
        </transition>
        <button @click="handleclick">切换</button>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                show:'true'
            }
        },
        methods:{
            handleclick(){
                this.show=!this.show;
            }
        }
    }
</script>

<style>
    .v-enter, .v-leave-to{
        opacity: 0;
    }
    .v-enter-active, .v-leave-active{
        transition: opacity 1s;
    }
</style>

2.多个组件的过渡（按照上面的方法也可以实现）下面说一种动态组件的方法

参考地址：

<template>
    <div class="dy">    
        <transition mode='out-in'>
            <component :is='type'></component>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
</template>

<script>
    import dyOne from './dynamic_one.vue'
    import dyTwo from './dynamic_two.vue'
    export default{
        data(){
            return{
                type:'dy-one'
            }
        },
        components:{
            'dy-one':dyOne,
            'dy-two':dyTwo
        },
        methods:{
            handleClick:function(){
                this.type=(this.type === 'dy-one'?'dy-two':'dy-one')
            }
        }
    }
</script>

<style>
    .v-enter, .v-leave-to{
        opacity: 0;
    }
    .v-enter-active, .v-leave-active{
        transition: opacity 1s;
    }
</style>

动态组件主要是component 来实现。

 附：部分api

fade: {
        title: '淡入淡出',
        fadeIn: '淡入',
        fadeInDown: '向下淡入',
        fadeInDownBig: '向下快速淡入',
        fadeInLeft: '向右淡入',
        fadeInLeftBig: '向右快速淡入',
        fadeInRight: '向左淡入',
        fadeInRightBig: '向左快速淡入',
        fadeInUp: '向上淡入',
        fadeInUpBig: '向上快速淡入',
        fadeOut: '淡出',
        fadeOutDown: '向下淡出',
        fadeOutDownBig: '向下快速淡出',
        fadeOutLeft: '向左淡出',
        fadeOutLeftBig: '向左快速淡出',
        adeOutRight: '向右淡出',
        fadeOutRightBig: '向右快速淡出',
        fadeOutUp: '向上淡出',
        fadeOutUpBig: '向上快速淡出'
      },
      bounce: {
        title: '弹跳类',
        bounceIn: '弹跳进入',
        bounceInDown: '向下弹跳进入',
        bounceInLeft: '向右弹跳进入',
        bounceInRight: '向左弹跳进入',
        bounceInUp: '向上弹跳进入',
        bounceOut: '弹跳退出',
        bounceOutDown: '向下弹跳退出',
        bounceOutLeft: '向左弹跳退出',
        bounceOutRight: '向右弹跳退出',
        bounceOutUp: '向上弹跳退出'
      },
      zoom: {
        title: '缩放类',
        zoomIn: '放大进入',
        zoomInDown: '向下放大进入',
        zoomInLeft: '向右放大进入',
        zoomInRight: '向左放大进入',
        zoomInUp: '向上放大进入',
        zoomOut: '缩小退出',
        zoomOutDown: '向下缩小退出',
        zoomOutLeft: '向左缩小退出',
        zoomOutRight: '向右缩小退出',
        zoomOutUp: '向上缩小退出'
      },
      rotate: {
        title: '旋转类',
        rotateIn: '顺时针旋转进入',
        rotateInDownLeft: '从左往下旋入',
        rotateInDownRight: '从右往下旋入',
        rotateInUpLeft: '从左往上旋入',
        rotateInUpRight: '从右往上旋入',
        rotateOut: '顺时针旋转退出',
        rotateOutDownLeft: '向左下旋出',
        rotateOutDownRight: '向右下旋出',
        rotateOutUpLeft: '向左上旋出',
        rotateOutUpRight: '向右上旋出'
      },
      flip: {
        title: '翻转类',
        flipInX: '水平翻转进入',
        flipInY: '垂直翻转进入',
        flipOutX: '水平翻转退出',
        flipOutY: '垂直翻转退出'
      },
      strong: {
        title: '强调类',
        bounce: '弹跳',
        flash: '闪烁',
        pulse: '脉冲',
        rubberBand: '橡皮筋',
        shake: '左右弱晃动',
        swing: '上下摆动',
        tada: '缩放摆动',
        wobble: '左右强晃动',
        jello: '拉伸抖动'
      }



附录：页面未加载完之前显示加载中的动画