在vue中使用wow动画插件（下载，配置，使用，参数）

已于 2022-07-02 09:36:05 修改
阅读量3.2k 收藏 11
点赞数 3
分类专栏： vue 文章标签： vue.js 动画 javascript
于 2022-02-18 17:24:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/babyxuqian/article/details/123007563
版权

目录

1.首先下载wow插件

2.在项目中的main.js中进行配置

3.使用方法

4.所有参数 

1.首先下载wow插件

下载命令：npm install wowjs --save-dev

2.在项目中的main.js中进行配置

import 'wowjs/css/libs/animate.css'
import wow from 'wowjs'
Vue.prototype.$wow = wow

3.使用方法

1.在需要使用的页面中的mounted函数加入代码

 mounted() {
    this.getList();
    this.$nextTick(() => {
      new this.$wow.WOW().init();
    });
  },

2开始使用（在class上面加入 wow 动画参数）

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>

类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。 

注意（如果是循环遍历的数据就需要用watch监听来实现）

<template>
  <div class="app">
    <div class="classify">
      <div class="wrap">
        <div class="title">
          <span>classify Worthy</span>
        </div>
        <div class="classifyInfo">
          <div
            :class="'list' + item.bounceInUp"
            :data-wow-delay="item.delay"
            v-for="(item, index) in classifyInfo"
            :key="index"
          >
            <div class="img">
              <img :src="item.url" alt="" />
            </div>
            <div class="text">
              <span>{{ item.title }}</span>
              <p>{{ item.content }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classifyInfo: "",
    };
  },
  methods: {
    getList() {
      this.$axios
        .get("/dataInfo.json")
        .then((res) => {
          this.classifyInfo = res.data.Home.classify;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  watch: {
    classifyInfo() {
      this.$nextTick(() => {
        new this.$wow.WOW().init();
      });
    },
  },
  mounted() {
    this.getList();
    this.$nextTick(() => {
      new this.$wow.WOW().init();
    });
  },
  created() {},
};
</script>

4.所有参数 

特效 – 前端开发，JQUERY特效，全栈开发，vue开发

后续 （日出效果）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	html, body {
		width: 100%;
		height: 100%;
		background-color: #0EA9B1;
		overflow: hidden;
	}

	img {
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	img:first-child {
		animation: move 2s linear infinite;
	}
	img:last-child {
		animation: move 2s linear 0.3s infinite;
	}


	.sun {
		width: 100px;
		height: 100px;
		margin: 100px;
		position: relative;
	}
	.sun::before, .sun::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 50px;
		height: 50px;
		transform: translate(-50%, -50%);
		background: rgba(255, 255, 255, 0.8);
		border-radius: 50%;
		animation: sun 2s infinite;
	}
	.sun::after {
		width: 80px;
		height: 80px;
		background: rgba(255, 255, 255, 0.6);
		animation: sun 3s infinite;
	}

    @keyframes move {
		0% {
			bottom: 0;
		}

		50% {
			bottom: -50px;
		}

		100% {
			bottom: 0;
		}
	}

	@keyframes sun {
		0% {
			transform:translate(-50%, -50%) scale(1);
			box-shadow: 0px 0px 5px rgba(255,255,255,0.7);
		}

		50% {
			transform:translate(-50%, -50%) scale(1.1);
			box-shadow: 0px 0px 30px rgba(255,255,255,0.7);
		}

		100% {
			transform:translate(-50%, -50%) scale(1);
			box-shadow: 0px 0px 5px rgba(255,255,255,0.7);
		}
	}
	</style>
</head>
<body>
	<div class="sun"></div>
	<img src="../images/1.png" height="211" width="2000" alt="loading">
	<img src="../images/2.png" height="211" width="2000" alt="loading">
</body>
</html>

后续

(1)出场动画效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= webpackConfig.name %></title>
    <style>
      html,
      body,
      #app {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      .chromeframe {
        margin: 0.2em 0;
        background: #ccc;
        color: #000;
        padding: 0.2em 0;
      }

      #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
      }

      #loader {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #fff;
        -webkit-animation: spin 2s linear infinite;
        -ms-animation: spin 2s linear infinite;
        -moz-animation: spin 2s linear infinite;
        -o-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
        z-index: 1001;
      }

      #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #fff;
        -webkit-animation: spin 3s linear infinite;
        -moz-animation: spin 3s linear infinite;
        -o-animation: spin 3s linear infinite;
        -ms-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
      }

      #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #fff;
        -moz-animation: spin 1.5s linear infinite;
        -o-animation: spin 1.5s linear infinite;
        -ms-animation: spin 1.5s linear infinite;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
      }

      @-webkit-keyframes spin {
        0% {
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @keyframes spin {
        0% {
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #7171c6;
        z-index: 1000;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
      }

      #loader-wrapper .loader-section.section-left {
        left: 0;
      }

      #loader-wrapper .loader-section.section-right {
        right: 0;
      }

      .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      }

      .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      }

      .loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
      }

      .loaded #loader-wrapper {
        visibility: hidden;
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
        -webkit-transition: all 0.3s 1s ease-out;
        transition: all 0.3s 1s ease-out;
      }

      .no-js #loader-wrapper {
        display: none;
      }

      .no-js h1 {
        color: #222222;
      }

      #loader-wrapper .load_title {
        font-family: "Open Sans";
        color: #fff;
        font-size: 19px;
        width: 100%;
        text-align: center;
        z-index: 9999999999999;
        position: absolute;
        top: 60%;
        opacity: 1;
        line-height: 30px;
      }

      #loader-wrapper .load_title span {
        font-weight: normal;
        font-style: italic;
        font-size: 13px;
        color: #fff;
        opacity: 0.5;
      }
      .loading_bc {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        background: #fff;
      }
      .loading_loader {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -mos-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
        width: 300px;
        height: 300px;
      }
      .loading_text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: text 2s infinite;
        -moz-animation: text 2s infinite;
        -moz-animation: text 2s infinite;
        -ms-animation: text 2s infinite;
        -o-animation: text 2s infinite;
        animation: text 2s infinite;
      }

      .loading_text img {
        width: 150px;
		border-radius: 50%;
      }

      .vertical {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
      }

      .loading_horizontal {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        padding-top: 149px;
      }

      .circlesdwn {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
      }

      .circle {
        position: absolute;
        width: 15em;
        height: 16em;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-animation: orbit 2s infinite;
        -moz-animation: orbit 2s infinite;
        -moz-animation: orbit 2s infinite;
        -ms-animation: orbit 2s infinite;
        -o-animation: orbit 2s infinite;
        animation: orbit 2s infinite;
        z-index: 5;
      }

      .circle:after {
        content: "";
        position: absolute;
        width: 2em;
        height: 2em;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -ms-border-radius: 100%;
        -o-border-radius: 100%;
        border-radius: 100%;
        background: #ee84a1;
      }

      .circle:nth-child(2) {
        -webkit-animation-delay: 100ms;
        -moz-animation-delay: 100ms;
        -ms-animation-delay: 100ms;
        -o-animation-delay: 100ms;
        animation-delay: 100ms;
        z-index: 4;
      }

      .circle:nth-child(2):after {
        background: #ee84a1;
        /* Pick a color 2*/
        -webkit-transform: scale(0.8, 0.8);
        -moz-transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -o-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
      }

      .circle:nth-child(3) {
        -webkit-animation-delay: 225ms;
        -moz-animation-delay: 225ms;
        -ms-animation-delay: 225ms;
        -o-animation-delay: 225ms;
        animation-delay: 225ms;
        z-index: 3;
      }

      .circle:nth-child(3):after {
        background: #ffa489;
        /* Pick a color 3*/
        -webkit-transform: scale(0.6, 0.6);
        -moz-transform: scale(0.6, 0.6);
        -ms-transform: scale(0.6, 0.6);
        -o-transform: scale(0.6, 0.6);
        transform: scale(0.6, 0.6);
      }

      .circle:nth-child(4) {
        -webkit-animation-delay: 350ms;
        -moz-animation-delay: 350ms;
        -ms-animation-delay: 350ms;
        -o-animation-delay: 350ms;
        animation-delay: 350ms;
        z-index: 2;
      }

      .circle:nth-child(4):after {
        background: #ff6d37;
        /* Pick a color 4*/
        -webkit-transform: scale(0.4, 0.4);
        -moz-transform: scale(0.4, 0.4);
        -ms-transform: scale(0.4, 0.4);
        -o-transform: scale(0.4, 0.4);
        transform: scale(0.4, 0.4);
      }

      .circle:nth-child(5) {
        -webkit-animation-delay: 475ms;
        -moz-animation-delay: 475ms;
        -ms-animation-delay: 475ms;
        -o-animation-delay: 475ms;
        animation-delay: 475ms;
        z-index: 1;
      }

      .circle:nth-child(5):after {
        background: #db2f00;
        /* Pick a color 5*/
        -webkit-transform: scale(0.2, 0.2);
        -moz-transform: scale(0.2, 0.2);
        -ms-transform: scale(0.2, 0.2);
        -o-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
      }

      @keyframes orbit {
        0% {
          transform: rotate(45deg);
        }
        5% {
          transform: rotate(45deg);
          animation-timing-function: ease-out;
        }
        70% {
          transform: rotate(405deg);
          animation-timing-function: ease-in;
        }
        100% {
          transform: rotate(405deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="loading_bc">
        <div class="loading_loader">
         <!-- <div class="loading_text">
            <img src="https://img-blog.csdnimg.cn/5369ce1725b446e7854c5673dc6e8bc2.png" alt="" class="index_logo"  />
          </div> -->
          <div class="loading_horizontal">
            <div class="circlesup">
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
            </div>
            <div class="circlesdwn">
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
            </div>
          </div>
          <div class="vertical">
            <div class="circlesup">
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
            </div>
            <div class="circlesdwn">
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
	  <style>
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    .chromeframe {
      margin: 0.2em 0;
      background: #ccc;
      color: #000;
      padding: 0.2em 0;
    }

    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
    }

    #loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -webkit-animation: spin 2s linear infinite;
      -ms-animation: spin 2s linear infinite;
      -moz-animation: spin 2s linear infinite;
      -o-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
      z-index: 1001;
    }

    #loader:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -webkit-animation: spin 3s linear infinite;
      -moz-animation: spin 3s linear infinite;
      -o-animation: spin 3s linear infinite;
      -ms-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite;
    }

    #loader:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -moz-animation: spin 1.5s linear infinite;
      -o-animation: spin 1.5s linear infinite;
      -ms-animation: spin 1.5s linear infinite;
      -webkit-animation: spin 1.5s linear infinite;
      animation: spin 1.5s linear infinite;
    }


    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }


    #loader-wrapper .loader-section {
      position: fixed;
      top: 0;
      width: 51%;
      height: 100%;
      background: #7171C6;
      z-index: 1000;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    #loader-wrapper .loader-section.section-left {
      left: 0;
    }

    #loader-wrapper .loader-section.section-right {
      right: 0;
    }


    .loaded #loader-wrapper .loader-section.section-left {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader {
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    }

    .loaded #loader-wrapper {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%);
      -webkit-transition: all 0.3s 1s ease-out;
      transition: all 0.3s 1s ease-out;
    }

    .no-js #loader-wrapper {
      display: none;
    }

    .no-js h1 {
      color: #222222;
    }

    #loader-wrapper .load_title {
      font-family: 'Open Sans';
      color: #FFF;
      font-size: 19px;
      width: 100%;
      text-align: center;
      z-index: 9999999999999;
      position: absolute;
      top: 60%;
      opacity: 1;
      line-height: 30px;
    }

    #loader-wrapper .load_title span {
      font-weight: normal;
      font-style: italic;
      font-size: 13px;
      color: #FFF;
      opacity: 0.5;
    }
  </style>
  </head>
  <body>
    <div id="app">
	    <div id="loader-wrapper">
		    <div id="loader"></div>
		    <div class="loader-section section-left"></div>
		    <div class="loader-section section-right"></div>
		    <div class="load_title">正在加载系统资源，请耐心等待</div>
        </div>
	</div>
  </body>
</html>

(2)沙漏

<template>
  <div class="loader">
    <span class="top"></span>
    <span class="bottom"></span>
  </div>
</template>

<style scoped>

.loader {
  width: 4.3em;
  height: 9.8em;
  font-size: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0%,
  90% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(0.5turn);
  }
}

.loader::after {
  content: "";
  position: absolute;
  width: 0.2em;
  height: 4.8em;
  background-color: deepskyblue;
  top: 1em;
  animation: flow 2s linear infinite;
}

@keyframes flow {
  10%,
  100% {
    transform: translateY(3.2em);
  }
}

.top,
.bottom {
  width: 3.5em;
  height: 3.5em;
  border-style: solid;
  border-color: saddlebrown;
  border-width: 0.2em 0.2em 0.6em 0.6em;
  border-radius: 50% 100% 50% 30%;
  position: relative;
  overflow: hidden;
}

.top {
  transform: rotate(-45deg);
}

.bottom {
  transform: rotate(135deg);
}

.top::before,
.bottom::before {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background-color: deepskyblue;
  animation: 2s linear infinite;
}

.top::before {
  border-radius: 0 100% 0 0;
  animation-name: drop-sand;
}

@keyframes drop-sand {
  to {
    transform: translate(-2.5em, 2.5em);
  }
}

.bottom::before {
  border-radius: 0 0 0 35%;
  transform: translate(2.5em, -2.5em);
  animation-name: fill-sand;
}

@keyframes fill-sand {
  to {
    transform: translate(0, 0);
  }
}
</style>

babyxuqian
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WOW.js动画插件
weixin_52629158的博客
05-17 284
可以加入 data-wow-duration（动画持续时间）、 data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）、data-wow-iteration（动画执行次数）属性。wow.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。1、wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css。
2024年 vue3 使用wow.js
12-14 1130
main.js 引入import 'wow.js/css/libs/animate.css'原来是vue3不支持wowjs vue3换成了wow.js，太容易混淆了！被反复折磨了好久，国内资料太少，官方又没找到demo。准备用vue3搞了懒加载动画功能。npm 安装wow.js。
vue插件vue-particles，粒子动画特效背景，收藏起来，避免找不到！！！
最新发布
2301_82244343的博客
04-20 880
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。
vue 2.x中使用wow.js
TomNumber的博客
07-01 685
vue 2.x 中使用wow.js
基于vue-web-terminal插件实现网页终端下载动画
beifengtz
11-03 1223
今天使用vue-web-terminal插件的Flash功能实现一个模拟下载动画。
安装使用Wow.js
qq_22841387的博客
06-05 659
现在我们使用进行动画效果的实现，但是缺乏滚动触发的动画效果 因为我是需要对整体项目都嵌套一个滚动动画效果，所以直接在中添加了 ：需要添加的class名字，遇到class名字后，执行滑动动画效果：动画的标识类名记得加上对应的class名字 显示效果...
在vue中使用的打印插件
11-16
本文将详细介绍如何在Vue中集成和使用打印插件。 1. **选择合适的打印插件** 在Vue中，常用的打印插件有`vue-print-nb`、`vue-print-page`等。这些插件简化了在Vue应用中添加打印功能的过程。以`vue-print-nb`为例...
解决vue中使用swiper插件问题及swiper在vue中的用法
10-18
在Vue中使用Swiper插件，首先需要理解Swiper本身的功能和特性。Swiper是一款强大的触摸滑动插件，尤其适合于移动设备上的应用，它提供了丰富的动画效果和交互功能，如焦点图、Tab切换、多图切换等。在Vue项目中集成...
vue 中使用中国天气插件
01-08
name: 'BIWeather.vue', created () { window.WIDGET = { ID: '自己的ID' }; (function (d) { var cs = d.createElement('link') cs.rel = 'stylesheet' cs.href = '...
Vue中使用Lodop插件实现打印功能的简单方法
10-15
以下将详细介绍如何在Vue中使用Lodop插件。 首先，我们需要了解Lodop的基本使用方法。在网页中实现打印通常包括以下几个步骤： 1. **初始化**：调用`LODOP.PRINT_INIT("打印任务名")`初始化打印任务。任务名可以...
详解如何在vue项目中使用lodop打印插件
10-17
主要介绍了详解如何在vue项目中使用lodop打印插件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
wow.js 动态效果插件
06-07
wow.js 动态效果插件
wow.js(h5)
12-03
页面在向下滚动的时候，有些元素会产生细小的动画效果。wow.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果.
WOW.js（可视区域展示动画）
08-13
WOW.js（可视区域展示动画）：http://blog.csdn.net/libin_1/article/details/52200659
关于wow.js在vue项目中的使用及遇到的坑
just_wq的博客
06-29 4994
第一次使用wow.js实现页面滚动加载动画。使用过程中主要遇到了两个问题：1.动画效果无效（后来发现是引用的动画类名问题）2.设置动画延迟执行遇到会先显示再延迟执行进入效果的问题。也是由于错误使用了动画类名。所以记录一下~ 在vue项目中的使用 1. 安装 npm install wowjs --save (animate.css会被自动安装，但是这里有坑) 2. 在main.js中引入animate.css 引入时需要注意看是引入的哪个animate.css文件，在后面有详细讲解。 3...
在vue中使用wowjs
susu_lsq的博客
09-19 2135
1、安装依赖 npm install wowjs -S 2、main.js中引入 引入animate.css，安装wowjs之后，直接引入 import 'animate.css' 3、在需要使用wowjs的组件中使用 在标签上添加动画的类名 data-wow-duration：动画持续时间；data-wow-delay：动画延迟时间。更多属性参考官网文档：https://www.delac.i...
在Vue中是用wow.js实现动画
Mrswater的博客
06-26 1028
1，首先先安装wow插件 它依赖animate.cssnpm install wowjs --save animate.css会自动安装 ，然后在main.js引入animate.css 2，在需要用的页面引入wow.js 3，在页面加载完的时候mounted里面初始化wow实例 4，需要用动画的一定加上类名wow，以下是wow.js中各种特效对应的类名 ...
vue与jq混用
u010289111的专栏
02-02 4172
原来没有实现过vue与jquery混用 然后百度了一下~~ 原来实现的是使用elementui框架加上原生的js实现的 然后没有用过我就很方 做完的时候还想着要不要套一套移动端的ui elementui到项目里面，可是想想都写完了很麻烦，然后就继续用原生的方法来实现页面中存在的计算功能~~ 但是暂时没有遇到使用混用vue与jq带来的操作DOM的问题，坑你目前阶段需求较少 然后我
怎么在vue中使用和风天气插件
04-29
可以按照以下步骤在 Vue 中使用和风天气插件： 1. 在终端中使用 npm 安装和风天气插件： ``` npm install vue-weather-widget --save ``` 2. 在 Vue 组件中引入和风天气插件： ```js import VueWeatherWidget ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值