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

本文链接：https://blog.youkuaiyun.com/qq_35430000/article/details/118149165

本文介绍了如何使用Vue自定义指令(v-animate)实现在元素进入可视区域时添加类名，从而触发CSS动画。通过监听滚动事件，判断元素位置是否在视口中，动态添加和移除类名，结合CSS关键帧动画(bottomMoveTop)，实现了标题从下往上缓缓出现的效果。此技术可用于网页动效设计，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

代码：

添加一个全局自定义指令

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;
}