vue3使用animate.css求助
在使用animate.css为vue3创建动画时,发现只有在页面首次初始化的时候动画才会加载。点击按钮什么的,动画不会再次加载了。没有用transition包裹。当我用transition包裹的时候,发现只能用一个元素去控制另一个元素的动画效果。这不是我想要的。
有没有一种方式可以实现比如我鼠标悬浮到按钮上的时候,按钮自身加载动画。 那就和以前一样写,手动监听,然后添加class 解决了,只要按照官网给的函数直接用@mousevoer调用就可以了
const animateCSS = (element, animation, prefix = 'animate__') =>
// We create a Promise and return it
new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
const node = document.querySelector(element);
node.classList.add(`${prefix}animated`, animationName);
// When the animation ends, we clean the classes and resolve the Promise
function handleAnimationEnd(event) {
event.stopPropagation();
node.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
node.addEventListener('animationend', handleAnimationEnd, {once: true});
});
页:
[1]