我得到了一个用于动画DOM中元素的指令,该指令如下所示:
Vue.directive('animate', {
bind(el, binding) {
let start = (binding.value)?binding.value.start:{y: 50, autoAlpha: 0};
TweenMax.set(el, start);
},
inserted: function(el, binding) {
let end = (binding.value)?binding.value.end:{y: 0, autoAlpha: 1};
end.ease = Quart.easeOut;
end.onComplete = () => {
el.removeAttribute("style");
el.classList.add("animation-done");
};
const f = function() {
console.log("scrolling");
if (InViewPort(el)) {
window.removeEventListener('scroll', f);
TweenMax.to(el, 1.5, end);
}
};
window.addEventListener('scroll', f);
f();
}
});
在组件中调用该指令,如下所示:
v-animate="{start: {y: 50, autoAlpha: 0}, end: {y: 0, autoAlpha: 1, delay: index * 0.5}}"
这给了我想要的灵活性,只有一个问题。事件监听器在inserted
范围内,并且在unbind
挂钩上不可用。
也许指令不是进入Vue的方式,有没有人有一些建议如何处理这个?