直播平台开发,进入可视区域执行动画、动效、添加样式类名
添加一个全局自定义指令
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;
}
以上就是直播平台开发,进入可视区域执行动画、动效、添加样式类名, 更多内容欢迎关注之后的文章