vue中使用wowjs实现滑动到可视区域加载动画_vue wow_我爱画页面的博客

用到的插件： wow.js+animate.css
wow.js官方文档：https://wowjs.uk/docs.html
animate.css官方文档：https://animate.style/
1、安装插件：
npm install wowjs --save-dev
npm install animate.css --save
2、在main.js全局引入： 
import 'animate.css';
3、将wow.js在需要的.vue文件中单独引用。 
 在vue2中使用wowjs遇到的坑： 这里不推荐全局引入wow.js，我全局引入后，本地环境运行好着，但是打包上线后，报错：Cannot set properties of undefind（setting ‘getPropertyValue’）
 最后经过查看wowjs代码，通过console.log(this)，发现wowjs中 this对象undefined
 发现是严格模式造成的，严格模式下，this是undefined。 
import { WOW } from 'wowjs'
  mounted() {
  // wow初始化
    this.$nextTick(() => {
      const 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() + ">")
      });
      wow.init();
    });
wow.js的配置：
 参考文档：https://www.dowebok.com/131.html
  
 offset为0时，设置动画的元素在出现在浏览器可视区域时执行动画 
4、使用动画
 html：
 
 css： 
.fadeInRight {
  animation: fadeInRight 1s linear 1;
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  100% {
    opacity: 1;
    transform: translateX(0);
至此，动画效果就可以实现啦！！！ 
报错后的解决思路：
 
我第一次在main.js中全局引入wow.js，上线后遇到报错
  
尝试解决方案一：
 刚开始的思路，因为严格模式下，this是undefined，所以移除了use strict就不会报错
 尝试方法：
 1、在项目根目录新建一个stripStrictLoader.js，并写入以下代码 
function StripStrictLoader(content) {
  if (content.includes('use strict')) content.replace(/('|")use strict('|");?/gm, '');
  if (this.cacheable) this.cacheable(true);
  return content;
module.exports = StripStrictLoader;
2、在vue.config.js中加入一段代码 
const path = require('path')
module.exports = ({
  transpileDependencies: true,
  chainWebpack: config => {
    config.module
      .rule('removeStrictLoader')
      .test(/\.(t|j)sx?$/)
      .enforce('post')
      .use('removeStrictLoader')
      .loader(path.resolve('./stripStrictLoader.js'))
      .end()
报错还有，未解决！ 
尝试解决方案二：
 将wow.js放到 public/static/js 目录下,
 然后在index.html中直接引入： 
<script type="text/javascript" src="./static/js/wow.js"></script>
<script type="text/javascript">
  new WOW().init()
</script>
报错消失！！！可以解决！ 
尝试解决方案三：
 局部引入wow.js，因为它会单独打个js，这样就不会打包在venders里，推荐这种方式！
                    需求：当页面向下滚动到可视区域时，动画出现；当页面向上回滚时，动画不会回退。用到的插件：wow.js+animate.csswow.js官方文档：https://wowjs.uk/docs.htmlanimate.css官方文档：https://animate.style/安装插件：npm install wowjs --save-devnpm install animate.css --save在main.js全局引入：// 使用样式库import animated from .
(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({
				一、（页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意。）
　　刚知道wow.js这个插件，之前写的类似滚动时页面效果都是自己用jQuery写的，现在有了插件，开发更加快捷有效了。
【演示及下载地址】http://www.dowebok.com/131.html
1、wow.js依赖于animate.css，首先在头部引用animate.c...
				首先 要清楚, Animate.css 是一个 css动画库,为我们封装好了动画效果,我们只需要根据需求选择对应的css写入到div上即可:
	fade: {
        title: '淡入淡出',
        fadeIn: '淡入',
        fadeInDown: '向下淡入',
        fadeInDownBig: '向下快速淡入',
        fadeInLeft: '向右淡入',
        fadeInLeftBig: '向右快速淡入',
				vue 鼠标滚动 加载组件 Vue-scroll-loader (vue-scroll-loader)
A scroll loading component for vue.js.
 vue.js的滚动加载组件。 
View demo
查看演示 Download Source 
下载源  安装 (Install)
  npm install vue-scroll-loader
				在Vue中使用ECharts搭配WebSocket实现数据实时可视化的过程大致如下：
1. 首先，在Vue项目中安装 ECharts 和 WebSocket 的依赖包。可以使用npm或者yarn命令进行安装。
2. 在Vue组件中引入ECharts和WebSocket，并在data中定义一个用于存储数据的数组，例如：dataList: []。
3. 在Vue组件的mounted生命周期中，使用ECharts初始化一个图表，并将其绑定到某个DOM元素上，例如：let myChart = echarts.init(document.getElementById('myChart'))。
4. 在mounted生命周期中，使用WebSocket连接到后端服务，例如：let ws = new WebSocket('ws://localhost:8080')
5. 在WebSocket的onmessage回调函数中，将接收到的数据解析为JSON格式，并将数据添加到dataList中，例如：this.dataList.push(JSON.parse(event.data))。
6. 在Vue组件的updated生命周期中，使用ECharts的setOption方法更新图表数据，例如：myChart.setOption({series: [{data: this.dataList}]}).
7. 在Vue组件的beforeDestroy生命周期中，关闭WebSocket连接。
通过以上步骤，就可以实现在Vue中使用ECharts和WebSocket实现数据实时可视化。需要注意的是，具体实现方式可能因具体的业务需求而有所不同，以上步骤仅供参考。