直播平臺開發,進入可視區域執行動畫、動效、新增樣式類名

zhibo系統開發發表於2022-06-29

直播平臺開發,進入可視區域執行動畫、動效、新增樣式類名

新增一個全域性自定義指令

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


以上就是直播平臺開發,進入可視區域執行動畫、動效、新增樣式類名, 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2903339/,如需轉載,請註明出處,否則將追究法律責任。

相關文章