vue2中使用Animate.css动画插件

①安装

 Animate 官网

npm install animate.css --save

yarn add animate.css

或者直接下载

 ②引入

在main.js中

import animated from "animate.css";

Vue.use(animated)

或

 import 'animate.css';

也可以直接引入在需要用动画的组件中 

 import 'animate.css'

③使用

vue官网vue官网Transition

Transition | Vue.js

结合Vue 提供的<transition>使用动画。

Animate.css是一个纯CSS动画库，其核心技术使用了 CSS3 里的 @keyframes 和 animation。

注意：使用Animate.css类时，需要为类 enter-active-class 和 leave-active-class 设置进入和离开的类，且加基类animate__animated ，否者不起作用 。

如果初次进入页面就显示动画效果，在transition 标签上添加 appear 属性来实现。

<div class="activeObserve">
    <transition enter-active-class="animate__animated animate__fadeInUp" >
         <activity  v-show="activeObserveshow"/>
    </transition>
</div>

这里是组件，用外盒子div把组件包裹占位置，最好根据内容写一个高度。不让样式乱掉。  也为了能让IntersectionObserver API监听目标元素，监听元素，首先保证元素在节点在。

.activeObserve{
    width: 100%;
    min-height: 766px;
    box-sizing: border-box;
}

 定义参数，让组件显示或隐藏。

data() {
        return {
            activeObserveshow:false,
        };
},

重要的点：

利用IntersectionObserver API监听目标元素是否可见。

如果可见就让组件显示出来，随之触发动画，注意要取消观察目标元素，不然会一直观察。

参考阮一峰的网络日志 ：IntersectionObserver API 使用教程

mounted(){
        // 创建一个IntersectionObserver实例
        const observer = new IntersectionObserver(
            (entries, observer) => {
                entries.forEach(entry => {
                    // 目标元素可见
                    if (entry.isIntersecting) {
                        if(entry.target.className.includes('activeObserve')){
                            this.activeObserveshow=true
                            // 取消观察目标元素
                            observer.unobserve(document.querySelector('.activeObserve'));
                        }

                        //if(entry.target.className.includes('carouselObserve')){
                            //console.log("carouselObserve");
                            //this.carouselObserveshow=true
                            // 取消观察目标元素
                          //observer.unobserve(document.querySelector('.carouselObserve'));
                            //return
                        //}




                    }else {
                        console.log('目标元素不可见');
                    }
                });
            }, 
            {
            root: null,   // 监听窗口滚动
            rootMargin: '0px',  // 根据需要调整触发时机
            threshold: 0.25,  // 目标元素交叉比例达到25%时触发
            }
        );
        // 观察目标元素
        observer.observe(document.querySelector('.activeObserve'));
    }

 也可以手写动画：

利用动态样式是为了让元素的节点在页面上，以便观察。

<activity :style="{visibility: activeObserveshow ? 'visible' : 'hidden'}" class="activeObserve" />

如果目标元素出现在页面上了，就添加动画类，动画类要自己写。如下： 

entry.target.classList.add('fadeInRight');

 动画：从右边进入。

.fadeInRight {
    animation: fadeInRight 1s linear;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%,0,0);
    }
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

 animate.css也提供其他属性：

1.设置动画延迟，animate.css 提供了从 1s 到 5s 的延迟类。

• animate__delay-1s

.myAniDelay500ms{
    animation-delay: 500ms;
}

2.控制动画持续时间 ，默认的动画时间是 1s，

• animate__slow 2s

• animate__slower 3s

• animate__fast 800ms

• animate__faster 500ms

.myAniDuration500ms{
    animation-duration: 500ms;
}

3.控制动画次数 ，默认动画执行次数为 1

• animate__repeat-1 1

• animate__repeat-2 2

• animate__repeat-3 3

• animate__infinite infinite，无限次数。 

 这些也可以使用添加类的方式来添加，比如：

<div class="box  animate__animated  animate__backInUp  myAniTimes10"></div>

.myAniTimes10{
  animation-iteration-count: 10;
}