Wowjs 和 Animate.css 无法与 VUEJS 一起使用

Question

我试图使用 wowjs 或 animate.css 包含一些动画，但它似乎不起作用。 这是我采取的步骤。

第一：

npm install wowjs

在main.js中

import 'animate.css';

在我想要使用动画的页面中

<b-container id = "container">
    <b-row style = "margin-top: 100px;" class = "animated fadeInUp">
    ....
    </b-row>
<b-container>

在我想使用wowjs的页面中

<template>
    <b-container id = "container">
        <b-row style = "margin-top: 100px;" class = "wow fadeInUp">
            ....
        </b-row>
    <b-container>
<template>

<script>
    import {WOW} from 'wowjs';
    export default {
        mounted() {
            new WOW().init();
        },

    }
</script>

我在这里做错了什么吗？根本没有动画显示。 感谢任何帮助！

Answer 1

对于 vue，您需要拥有最新的 vue-cli (4.5.12) 和 animate.css (4.1.1) 版本才能工作。

您可能想直接导入它们并通过 CDN 加载它们。

对于 wowjs，请尝试 (npm install wow.js)。您可以在这里查看参考资料：

https://github.com/animate-css/animate.css/issues/993

https://github.com/matthieua/WOW/issues/252

Answer 2

我用wow js做了很多尝试，但这个方法不起作用。 经过多次尝试，我尝试了不同的方法，希望它对你有用

• 我从https://github.com/graingert/wow下载了该库 然后我复制了这些文件 1-动画.css 2- wow.min.js
• 然后我将这两个文件包含在我的项目中
• 在我写的main.js文件中

import "./assets/css/animate.css";
import WOW from "./assets/js/wow.min.js";

//  Wow.js
const wow = new WOW();
wow.init();

?????????????????????????????????????????????????????? https://www.linkedin.com/posts/mohammedziyad8990_%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9% 85%D9%83%D8%AA%D8%A8%D8%A9-wow-js%D9%85%D8%B9-vue-js-3-%D8%A7%D9%84%D9%85%D9 %83%D8%AA%D8%A8%D8%A9-activity-7195175373876191232-jLu1?utm_source=share&utm_medium=member_desktop`在此处输入代码`