woaiwaigua 发表于 2022-11-5 19:46

vue3使用animate.css求助

在使用animate.css为vue3创建动画时,发现只有在页面首次初始化的时候动画才会加载。点击按钮什么的,动画不会再次加载了。没有用transition包裹。
当我用transition包裹的时候,发现只能用一个元素去控制另一个元素的动画效果。这不是我想要的。
有没有一种方式可以实现比如我鼠标悬浮到按钮上的时候,按钮自身加载动画。

周小雨 发表于 2022-11-6 00:12

那就和以前一样写,手动监听,然后添加class

woaiwaigua 发表于 2022-11-6 15:36

解决了,只要按照官网给的函数直接用@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]
查看完整版本: vue3使用animate.css求助