vue进入可视区域执行动画、动效、添加样式类名等

骑猪看日落 2021-09-08 13:14 857阅读 1赞

举例:每个模块标题，进入可视区域后，标题从下往上缓缓出现

代码：

添加一个全局自定义指令

import Vue from 'vue'
    //注册'v-animate'  当元素出现在可视范围时添加类名触发动效样式
    Vue.directive('animate', {
        inserted: function (el, binding) {
          // 聚焦元素
          binding.addClass = () => {
            const { top } = el.getBoundingClientRect()
            const h = document.documentElement.clientHeight || document.body.clientHeight
            if (top < h) {
              if(el.className.indexOf(binding.value) == -1 ){
                // 初次还未绑定过，则新增类名(注意：下面单引号中间是一个空格！！！)
                el.className = binding.value+' '+el.className
              }
              if (binding.addClass) {
                window.removeEventListener('scroll', binding.addClass)
              }
            }
          }
          window.addEventListener('scroll', binding.addClass,true)
          binding.addClass()
        },
        unbind: function (el, binding) {
          if (binding.addClass) {
            window.removeEventListener('scroll', binding.addClass)
          }
        }
    })

回到html中给需要添加动效的地方添加上 类名

<p class="title" v-animate="'queue-bottom'">我是需要动效的标题</p>

动画效果：

@keyframes bottomMoveTop{
      0%{
        opacity: 0;
        transform: translate3d(0, 50px, 0);
      }
      100% {
        opacity: 1;
        transform: none;
      }
    }
    
    .queue-bottom {
      animation: bottomMoveTop .6s cubic-bezier(.5,1,.89,1);
      animation-fill-mode: forwards;
    }