animate.css 实现 网页滚动指定位置添加动画

1、安装

npm install animate.css --save

2、main.js 引用

import animate from 'animate.css'
Vue.use(animate)

3、使用 （新版本需要“animate_ ” 做连接）

<img src="~@/assets/img/b.png" class="animate__animated animate__bounce" />

指定位置添加动画

<template>
    <div class="animation" @scroll.passive="onScroll($event)">
        <div class="box">111</div>
        <img src="~@/assets/img/b.png" alt="" class="animate__animated" ref="img" />
        <div class="box">111</div>
    </div>
</template>

<script>
export default {
    methods: {
        onScroll(e) {
            var scrollTop = e.target.scrollTop
            if (scrollTop >= 480) {
                this.$refs.img.classList.add('animate__bounce')
            }
        },
    },
}
</script>
<style lang="less" scoped>
.animation {
    height: 100vh;
    overflow-y: scroll;
}
.box {
    height: 1000px;
}
</style>