直播平台开发，进入可视区域执行动画、动效、添加样式类名

直播平台开发，进入可视区域执行动画、动效、添加样式类名

添加一个全局自定义指令

 

1

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

​ 

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

 

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

 

动画效果：

 

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

 

以上就是直播平台开发，进入可视区域执行动画、动效、添加样式类名， 更多内容欢迎关注之后的文章