元素滚动到视图中时对其进行动画处理：vue-animate-onscroll

r囧r小猫 2021-07-26 01:39 511阅读 0赞

vue-animate-onscroll官网：[https://www.npmjs.com/package/vue-animate-onscroll][https_www.npmjs.com_package_vue-animate-onscroll]

vue-animate-onscroll在线demo：[https://vue-animate-onscroll.netlify.app/][https_vue-animate-onscroll.netlify.app]

animate.min.css官网：[http://www.animate.net.cn/][http_www.animate.net.cn]

HTML中引入animate.min.css

test.vue:

<template>
      <div class="test">
        <div style="height: 1200px;"></div>
        <section style="border:1px solid red">
          <div v-animate-onscroll="{up: 'animated slideInLeft'}">向上滚动一次</div>
          <div v-animate-onscroll="{down: 'animated slideInLeft'}">向下滚动一次</div>
    
          <div v-animate-onscroll.repeat="{up: 'animated slideInLeft'}">重复向上滚动</div>
          <div v-animate-onscroll.repeat="{down: 'animated slideInLeft'}">重复向下滚动</div>
    
          <div
            v-animate-onscroll="{down: 'animated slideInLeft', up: 'animated slideInRight' }"
          >多重动画。对不同滚动方向使用不同的动画</div>
        </section>
    
        <div style="height: 1300px;"></div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {};
      },
      mounted() {},
      methods: {},
      destroyed() {}
    };
    </script>
    <style lang="scss" scope>
    .test {
      background-color: rgba(219, 219, 219, 0.705);
      color: black;
      overflow-x: hidden;
    }
    </style>

[https_www.npmjs.com_package_vue-animate-onscroll]: https://www.npmjs.com/package/vue-animate-onscroll
[https_vue-animate-onscroll.netlify.app]: https://vue-animate-onscroll.netlify.app/
[http_www.animate.net.cn]: http://www.animate.net.cn/