The first one: screen fit

The corresponding design draft is 1920px

Download the flexible. Js

(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px'  } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', Function (e) {if (e.persisted) {setRemUnit()}}) // detect 0.px supports if (DPR >= 2) {var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } }(window, document))Copy the code

Download postcss – px2rem

npm install --save postcss-px2rem
Copy the code

Configuration nuxt. Cofig. Js

Plus in head

script: [
   { src: '/rem/flexible.js', type: 'text/javascript', charset: 'utf-8'}
],
Copy the code

Add to build

postcss: [
   require('postcss-px2rem')({
     remUnit: 192
   })
],
Copy the code

Second point: use swiper plug-in

So if you import swiper into the component as usual it says swiper is not defined, or what window,document is not defined

Nuxt. js import vue-awes-swiper, console error Window is not defined

Because when the server renders, it doesn’t have a Window object

So when NPM installs dependencies, you need to write your own script to introduce nuxt.config.js

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
Copy the code

The introduction of nuxt. Config. Js

plugins: [
    { src: "~/plugins/swiper.js", ssr: false },
  ],
Copy the code

Wow.js animate. CSS step pit

Reveal Animations When Scrolling

Animate.css | A cross-browser library of CSS animations.

Nuxt introduces wow and animate. CSS to scroll with animation

Nuxtjs using wow.js+animate. CSS to implement scrolling loading animation _ Azure sky blog -CSDN blog

Recently, I made an official website (Nuxt is used in the technology stack). I needed to slide to the visual area to trigger the animation effect. Almost all the pages had to “move”, and handwriting was exhausting. I found that wow.js+animate. CSS could meet my needs.

animate.css

Animate. CSS is a collection of animation effects created using CSS3 animation. Animate. CSS is a collection of animation effects created using CSS3 animation.

Liverpoolfc.tv: daneden. Making. IO/animate. CSS…

GitHub:github.com/daneden/ani…

Since you rely on animate. CSS when following WowJS, it will be installed automatically, so we won’t cover the installation method here.

<h1 class="animate__animated animate__bounce">Example</h1>
Copy the code

Just add animate__animated and the name of a special effect to the class to use it. And then it has a bunch of advanced uses:

  • Animation delay time:

    Example

    Animate__delay – 2 s: perform animation animate__delay again after 2 seconds – 3 s: 3 seconds and then perform an animation animate__delay – 4 s: 4 seconds before performing animation animate__delay – 5 s: 5 seconds before you perform the animation

  • Infinite loop animation:

    Example

    Animate__infinite: Infinite loops

WOW.js

1.

Because in Nuxt code is packaged twice on the Client and Server, the Client has window and Document objects, and on the Server there are no window and Document objects. So WowJS can only be introduced in devDependencies.

CSS, it supports animate. CSS up to 60 kinds of animation effects, basic can meet a variety of needs, can not meet the need to customize.

Website: www.delac.io/wow/

GitHub：GitHub – matthieua/WOW: Reveal CSS animation as you scroll down a page

npm install wowjs --save-dev
#or
yarn add wowjs --dev
Copy the code

As you can see, Wow automatically installed animate. CSS for you. We need to import it in nuxt.config.js.

export default {

…

// Global CSS: go.nuxtjs.dev/config-css

css: […, ‘animate.css/animate.css’],

…

}

Next initialize WOW by introducing the following in the vue file where you need to use effects:

Var {wow} = require('wowjs')} </script>Copy the code

Instantiate WOW according to the environment in the lifecycle:

{this.$nextTick() => {if (process.browser) {// Instantiate the page in a new WOW({animateClass: 'animate__animated'}).init() } }); },Copy the code

Note: new WOW().init(); “WOW” has to be capitalized, otherwise it won’t work. Because the valid variable in the WowJS source code is WOW

Note: Why do I need to customize animateClass here?

Let’s look at the default property configuration in wow.js

WOW.prototype.defaults = {
  boxClass: 'wow',
  animateClass: 'animated',
  offset: 0,
  mobile: true,
  live: true,
  callback: null,
  scrollContainer: null
};
Copy the code

The default animateClass is animated, but classes in the latest versions of animate. CSS begin with animate__, for example

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
Copy the code

So we need to change the default animateClass: ‘animated’ to animateClass: ‘animate__animated’ for animation to work.

Use 3.

Simply add wow to the class and an animate. CSS animation to create happy scrolling. Such as:

<h3 class="pro-alias text-right wow animate__rotateInUpRight">why</h3>
Copy the code

There are also many other configurations, such as:

<div class="wow animate__bounce "data-wow-delay="1.5s" data-wow-iteration="1"></div>Copy the code
  • Data-wow-duration: Changes the animation duration
  • Data-wow-delay: The delay before the animation starts
  • Data-wow-offset: the distance from which the animation starts (relative to the bottom of the browser)
  • Data-wow-iteration: Animation iteration number (infinite: infinite)

4. Use custom animations

<p class="si-desc wow customSlideUpIn" v-for="(item, index) in (selectDetail.description)" :key="index">item</p>
Copy the code

Source link: zhuanlan.zhihu.com/p/395109040