创蓝云智 - 在next.js中引入动画wow.JS - 《JS 学习笔记》

前言
1.通过npm安装wow.JS
2.在你的_document.js或Layoutn HOC的Head组件中导入animate.css
3.执行

前言

当你使用Next.JS进行服务器端渲染时，它并不那么简单，原因是：wow.JS使用浏览器的’window’对象来说，并且每一次渲染时没有’window’对象！…因为它是在服务器中完成的！

1.通过npm安装wow.JS

npm add wow.js

2.在你的_document.js或Layoutn HOC的Head组件中导入animate.css

import Head from "next/head"
...
<Head>
  <title>my Project</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"/>
</Head>

3.执行

const isServer = typeof window === 'undefined'
const WOW = !isServer ? require('wow.js') : null
export default class MyComponent extends React.Component {
    componentDidMount() {
        new WOW().init()
    }
    render() {
        return (
            <h2 className={"wow fadeInUp"}>I'm animated!</h2>
            )
    }
}
<div className="wow animate__animated animate__zoomIn animate__delay-1s box">
  <img
    src="https://static.253.com/images/new_www/bannerr/banner.png"
    alt="智能云通讯服务"
    width="437"
  />
</div>