网页入场动画之 Animate

话不多说看效果

提示： gif不动了就刷新下页面 ！！！！！！！！！！！！！！！！

仔细看 Animate 就是动态添加一些它自己封装的一些样式类 这就是用法
但是类前面必须加 animate__animated

1、安装 animate

npm install animate.css --save

2、main 引入

import animated from 'animate.css' // npm install animate.css --save安装，再引入
Vue.use(animated)

下面就是一些动态添加样式的方法

Animate 还有很多的动画 这只是冰山一角 具体可以去 去官网看
这里我加了鼠标滚动监听，上滚删类 下滚添加类

// 这是一个vue的组件  可直接拿走  引入的组件是下一段代码
<template>
  <div class="hello">
    <h1 :class="css1">帅帅1</h1>
    <h2 :class="css2">帅帅2</h2>
    <h3 :class="css3">帅帅3</h3>
    <h4 :class="css4">帅帅4</h4>
    <Hell2></Hell2>
  </div>
</template>

<script>
import Hell2 from "./hell2.vue";
export default {
  name: "HelloWorld",
  components: {
    Hell2
  },
  data() {
    return {
      css1: "",
      css2: "",
      css3: "",
      css4: ""
    };
  },
  created() {
    this.cssa();
    this.cssb();
    this.cssc();
    this.cssd();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true); // 监听（绑定）滚轮 滚动事件
  },
  methods: {
    css() {
      this.css1 = "";
      this.css2 = "";
      this.css3 = "";
      this.css4 = "";
    },
    cssa() {
      this.css1 = "animate__animated animate__fadeInLeft ";
    },
    cssb() {
      this.css2 = "animate__animated animate__fadeInRight";
    },
    cssc() {
      this.css3 = "animate__animated animate__bounceInDown animate__delay-1s";
    },
    cssd() {
      this.css4 = "animate__animated animate__bounceInUp animate__delay-1s";
    },
    handleScroll() {
      // 监听鼠标滚动
      // 页面滚动距顶部距离
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var scroll = scrollTop - this.i;
      this.i = scrollTop;
      if (scroll < 0) {
        // 鼠标上滚
        this.css();
      } else {
        // 鼠标下滚
        this.cssa();
        this.cssb();
        this.cssc();
        this.cssd();
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {
  // height: 1500px;
  display: flex;
  flex-wrap: wrap;
  background-size: c;
  background: url(../assets/bg.png) no-repeat;
  h1 {
    width: 50%;
    margin-top: 300px;
    text-align: center;
    height: 200px;
    line-height: 200px;
    background: #333;
  }
  h2 {
    margin-top: 300px;
    width: 50%;
    text-align: center;
    height: 200px;
    line-height: 200px;
    background: #444;
  }
  h3 {
    width: 50%;
    text-align: center;
    height: 200px;
    line-height: 200px;
    background: #555;
    margin: 0;
  }
  h4 {
    width: 50%;
    text-align: center;
    height: 200px;
    line-height: 200px;
    background: #666;
    margin: 0;
  }
}
</style>

这里面有组件进入可视区域监听

// 这是上面引入的那个组件  改吧改吧就是你想要的效果
<template>
  <div class="hello">
    <h5 :class="css5">帅帅5</h5>
    <h6 :class="css6">帅帅6</h6>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      css5: "",
      css6: ""
    };
  },
  created() {},
  mounted() {
    window.addEventListener("scroll", this.scrollHandle, true); // 监听 监听元素是否进入/移出可视区域
  },
  methods: {
    csse() {
      this.css5 =
        "animate__animated animate__fadeInTopLeft animate__delay-0.5s animate__slow-5s";
      // window.removeEventListener('scroll', this.scrollHandle, true); // 记得在适当的时候移除事件监听
    },
    cssf() {
      this.css6 =
        "animate__animated animate__fadeInRightBig animate__delay-0.5s animate__slow-5s";
      // window.removeEventListener('scroll', this.scrollHandle, true); // 记得在适当的时候移除事件监听
    },
    scrollHandle() {
      const offset = this.$el.getBoundingClientRect();
      const offsetTop = offset.top;
      const offsetBottom = offset.bottom;
      // const offsetHeight = offset.height;
      // 进入可视区域
      // console.log(offsetTop,offsetBottom)
      if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
        // console.log('进入可视区域');
        // do something...
        this.csse();
        this.cssf();
      } else {
        // console.log('移出可视区域');
        // this.enabledPause = false;
        // do something...
        this.css5 = "";
        this.css6 = "";
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {
  height: 1500px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 500px;
  overflow: hidden;
  h5 {
    width: 50%;
    text-align: center;
    height: 200px;
    line-height: 200px;
    background: #777;
    margin: 0;
  }
  h6 {
    width: 50%;
    text-align: center;
    height: 200px;
    line-height: 200px;
    background: #888;
    margin: 0;
  }
}
</style>

-----------------------------------------------你在变强 也在变亮--------------------------------------------------