WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件。

缺陷：当页面向下滚动时，动画出现；当页面向上回滚时，动画不会回退。（即动画仅出现一次！）

官网地址 https://www.delac.io/wow/

Demo演示 -仿oppo首页 https://www.dowebok.com/demo/131/index2.html

1. 安装

2. 配置

3. 使用

4. 自定义动画持续时间

5. 自定义动画延迟时间

6. 自定义滚动距离

7. 自定义动画重复次数

完整范例代码

1. 安装

npm install wowjs --save-dev

animate.css会自动安装

2. 配置

main.js中

// 动画 animate.css
require('animate.css/animate.min.css');
// 滚动动画 wow.js
import {WOW} from 'wowjs'
Vue.prototype.$wow = new WOW({
  boxClass: 'wow', // default
  animateClass: 'animated', // default
  offset: 150, // default
  mobile: true, // default
  live: false,
  // live为true时，控制台会提示：MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.
  callback: function(box) {
    console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
属性/方法
类型
默认值
说明
boxClass
字符串
‘wow’
需要执行动画的元素的 class
animateClass
字符串
‘animated’
animation.css 动画的 class
offset
整数
0
距离可视区域多少开始执行动画
mobile
布尔值
true
是否在移动设备上执行动画
live
布尔值
true
异步加载的内容是否有效
 
offset为0时，设置动画的元素在出现在浏览器可视区域时执行动画
 
 
 3. 使用
 
在需要添加滚动动画的 .vue文件中，先初始化wow
 
        mounted() {
            this.$nextTick(()=>{
                    this.$wow.init()
异步加载部分，使用watch初始化
 
watch: {
  xxxx() {
    this.$nextTick(() => { // 在dom渲染完后,再执行动画
     		this.$wow.init()
完成初始化后，在需要添加动画的元素上，添加上相关动画的类名即可
 
 <div class="wow animate__animated animate__fadeIn">900</div>
 wow 为配置中的动画类名，必要！
 
animate__animated animate__fadeIn 为animate.css 的动画效果，更多动画效果详情见 https://blog.csdn.net/weixin_41192489/article/details/111083527
 
 
4. 自定义动画持续时间
 
添加 data-wow-duration="2s" 
 
<div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">900</div>
 
 
5. 自定义动画延迟时间
 
添加 data-wow-delay="5s"
 
<div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">900</div>
 
 6. 自定义滚动距离
 
 添加 data-wow-offset="200"   效果：当元素距离可视区域200时开始执行动画（元素顶部到浏览器底部的距离）
 
<div class="wow animate__animated animate__fadeIn" data-wow-offset="200">900</div>
 
 
7. 自定义动画重复次数
 
 添加 data-wow-iteration="2"  效果：动画会连续播放2次
 
<div class="wow animate__animated animate__fadeIn" data-wow-iteration="2" >900</div>
 
若想动画无限重复播放，则使用  data-wow-iteration="infinite"
 
<div class="wow animate__animated animate__fadeIn" data-wow-iteration="infinite" >900</div>
 
 
 完整范例代码
 
<template>
        <div class="box100">0</div>
        <div class="box100">100</div>
        <div class="box100">200</div>
        <div class="box100">300</div>
        <div class="box100">400</div>
        <div class="box100">500</div>
        <div class="box100">600</div>
        <div class="box100">700</div>
        <div class="box100">800</div>
        <div class="box100 wow animate__animated animate__fadeIn" >900</div>
        <div class="box100">1000</div>
        <div class="box100">1100</div>
        <div class="box100">1200</div>
</template>
<script>
    export default {
        mounted() {
            this.$nextTick(()=>{
                    this.$wow.init()
</script>
<style scoped>
    .box100 {
        height: 100px;
        background: #3a8ee6;
        border: 1px solid black;
</style>
                    WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件。缺陷：当页面向下滚动时，动画出现；当页面向上回滚时，动画不会回退。（即动画仅出现一次！）官网地址https://www.delac.io/wow/Demo演示-仿oppo首页 https://www.dowebok.com/demo/131/index2.html1. 安装npm install wowjs --save-devanimate.css会自动安装2. 配置main.js中...
2、main.js引入相关依赖
import { WOW } from 'wowjs'
import animated from 'wowjs/css/libs/animate.css'
//这里需要将样式用起来，
Vue.use(an
(animate.css会被自动安装，但是这里有坑)
2. 在main.js中引入animate.css
引入时需要注意看是引入的哪个animate.css文件，在后面有详细讲解。
3. 引入wow.js并初始化
这里方法有二
在main.js中添加
import wow from ‘wowjs’
Vue.prototype.$wow = wow
mounted () {
new this.$wow.WOW({
				
###开门见山，先上动态效果图！
之前公司的官网都是静态页面，突然产品和运营要重新改动官网，并要求页面在滑动的过程中需要出现一些动态效果，作为很久不用css3的小白，也把它忘的差不多啦，于是就开始百度有没有一些动画库，所以我就发现了Animate.css ——一款强大齐全的css动画库，和wow.js 插件。
###Animate.css
这是git仓库链接，具体了解可点击Animate...
				
今天看迅雷官网  https://www.xunlei.com/v2018/dist/aboutus.html
实现的滚动到可视区域后显示动画，自己之前没做过这种，非常感兴趣，然后问小伙伴，
大部分都没做过类似的，于是乎我只能自己查了
第一想到的是swiper，之前写轮播图用过。
https://www.swiper.com.cn/
https://www.swiper.com.cn/usage/animate/index.html
但是引入了之后 发现不是特别适合我 而且还有5版本6版本一系列写法兼容问
				
<template>
	<div v-if="show"  :class="{ showAni: show, closeAni: closeStatus }" >
        <div class="content"></div>
</template>
<script>
export default {
	data() {
		return {
			show: false,
			closeSta.
//注册'v-animate'  当元素出现在可视范围时添加类名出发样式
Vue.directive('animate', {
    inserted: function (el, binding) {
      // 聚焦元素
      binding.addClass = () => {
        const { top } = el.getBo
   //注册'v-class'  当元素出现在可视范围时添加类名出发样式
   Vue.directive('class', {
       inserted: function (el, binding) {
    // 聚焦元素
    binding.addClass = () => {
      const { top } = el.getBoundingClientRect()
      const h = document.documentElemen
				
Vue.js是一款流行的JavaScript框架，它提供了强大的数据绑定和组件化功能，使得前端开发更加高效和便捷。Vue.js框架的官网（https://cn.vuejs.org/）上提供了两个版本的下载，分别是vue.js和vue.min.js。
vue.js是开发环境使用的版本，它包含了完整的Vue框架代码和注释，文件大小比较大，可读性比较好，适合进行开发调试和学习使用。
vue.min.js是生产环境使用的版本，它经过了压缩和优化处理，文件大小更小，可直接用于生产环境，提高了页面加载速度和性能。一般来说，我们在开发过程中使用vue.js，在上线前使用vue.min.js进行打包压缩优化，然后部署到网站上。
总之，vue.js和vue.min.js都是Vue.js框架的核心代码，选择哪个版本取决于你的需求和用途。对于初学者来说，建议先使用vue.js进行学习和开发，熟悉了框架的使用后再选择vue.min.js进行生产环境部署和优化。
                    m0_59585458: 
                    大佬，我照你这个复制的怎么图片发送有问题
Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at HTMLInputElement.eval (index.vue:301:1)他发送图片报这个错误请问如何解决
                【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
                    你看我是不是很帅: 
                    有没有源码或者实例下载啊，报错了弄不好
                Element UI表格拖拽（vue中） —— 行拖拽、列拖拽
                    小扒菜同学: 
                    请问一下 怎么拿到改变列滴数据啊？
                js/javascript 操作时间日期【全】含时间日期的创建、获取、比较、计算、格式化、时间戳、昨天、今天、星期汉化、计时、相关插件等
                    m0_56351757: 
                    var date = new Date();  
"现在的时间是："+date.getFullYear()+"年"+date.getMonth()+"月"+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒。" 
这个好像运行不了
                前端模拟接口工具推荐——Apifox（mock数据）【图解教程】
                    啊哈嘿嗯: 
                    要是可以自己输入数据来使用 该怎么办呢