100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

vue3 vite 数据可视化大屏入场动画教程

vue yekong

之前我们完成了数据可视化大屏页面布局写法，今天我们来给数据大屏添加入场动画元素，让元素动起来。动画我们使用的是wow.js来实现入场动画.

安装依赖

pnpm i wow.js

引入animate.css

main.js引入动画css

import 'wow.js/css/libs/animate.css'

使用

import WOW from "wow.js";

mounted() {
    var wow = new WOW({
      boxClass: "wow", // animated element css class (default is wow)
      animateClass: "animated", // animation css class (default is animated)
      offset: 0, // distance to the element when triggering the animation (default is 0)
      mobile: true, // trigger animations on mobile devices (default is true)
      live: true, // act on asynchronously loaded content (default is true)
      callback: function (box) {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window,
      resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
  },

页面添加动画

<div class="homeMain">
  <!--      左-->
  <div class="homeMainLeft">
    <div class="homeMainLeftItem wow fadeInLeft" data-wow-delay="0.3s">
      <itemTitle title="学生（数据源：教务）"></itemTitle>
      <item></item>
    </div>
    <div class="homeMainLeftItem wow fadeInLeft" data-wow-delay="0.6s">
      <itemTitle title="教工（数据源：人事）"></itemTitle>
      <item></item>
    </div>
    <div class="homeMainLeftItem wow fadeInLeft" data-wow-delay="0.9s">
      <itemTitle title="资产（数据源：财务）"></itemTitle>
      <item></item>
    </div>
  </div>
  <!--      中-->
  <div class="homeMainCenter">
    <div class="homeMainCenterItem wow fadeInDown" data-wow-delay="0.3s">
      <itemTitle title="办学条件指标监测"></itemTitle>
      <item2></item2>
    </div>
    <div class="homeMainCenterItem homeMainCenterItem2 wow flipInX" data-wow-delay="0.7s">
      <div class="homeMainCenterItemInner">
        <itemTitle title="办学条件指标监测"></itemTitle>
        <item></item>
      </div>
      <div class="homeMainCenterItemInner wow bounceIn" data-wow-delay="1s">
        <itemTitle title="办学条件指标监测"></itemTitle>
        <item></item>
      </div>
    </div>
    <div class="homeMainCenterItem wow fadeInUp" data-wow-delay="1.2s">
      <itemTitle title="办学条件指标监测"></itemTitle>
      <item2></item2>
    </div>
  </div>
  <!--      右-->
  <div class="homeMainRight">
    <div class="homeMainRightItem wow fadeInRight" data-wow-delay="0.3s">
      <itemTitle title="仪器设备（数据源：财务）"></itemTitle>
      <item></item>
    </div>
    <div class="homeMainRightItem wow fadeInRight" data-wow-delay="0.6s">
      <itemTitle title="图书（数据源：图书馆）"></itemTitle>
      <item></item>
    </div>
    <div class="homeMainRightItem wow fadeInRight" data-wow-delay="0.9s">
      <itemTitle title="办学条件指标监测"></itemTitle>
      <item></item>
    </div>
  </div>
</div>

效果截图

添加完动画后，最终效果如下：
效果截图

vue3 vite 数据可视化大屏入场动画教程分享到这里结束啦。

更多数据可视化大屏教程

vue3 vite 数据可视化大屏教程

喜欢