Live broadcast platform development, enter the visual area to execute animation, dynamic effects and add style class names

Live platform development , Enter the visual area to execute the animation 、 Dynamic effect 、 Add style class name
Add a global custom directive

import Vue from 'vue'
// register 'v-animate'  When the element appears in the visual range, add the class name to trigger the dynamic style 
Vue.directive('animate', {
    
    inserted: function (el, binding) {
    
      //  Focusing on the element 
      binding.addClass = () => {
    
        const {
     top } = el.getBoundingClientRect()
        const h = document.documentElement.clientHeight || document.body.clientHeight
        if (top < h) {
    
          if(el.className.indexOf(binding.value) == -1 ){
    
            //  It has not been bound for the first time , Add a new class name ( Be careful ： There is a space in the middle of the single quotation mark below ！！！)
            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)
      }
    }
}) 

go back to html Add... To the places where dynamic effects need to be added Class name

 <p class="title" v-animate="'queue-bottom'"> I'm a title that needs action </p>
 Animation effect ：

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

The above is the development of live broadcasting platform , Enter the visual area to execute the animation 、 Dynamic effect 、 Add style class name , More content welcome to follow the article