vue项目项目使用animate.css动画效果

文章目录

animate.css使用安装引入使用在vue中使用过渡&动画里的内容 [animate.css官网 具体参数参考这里](https://animate.style/)wow.js:滚动时显示动画安装引入全局引入局部引入在需要的组件中引用wow.js在生命周期里中初始化wow.js

animate.css使用

安装

npm i animate.css

引入

在main.ts文件中引入

// 引入动画库import "animate.css"

使用

注意安装animate.css版本，我这里用的v4.1.1 ，animate__animated是基类必须使用的(因为安装的animate版本是4.x，使用时要注意对应的所有类名都以animate__开头，并且还要配合animate__animated一起使用！)

//注意这里必须加animate__animated基类<div class="animate__animated animate__fadeInDown"></div>

在vue中使用过渡&动画里的内容

结合了vue中过渡&动画里的内容，自定义过渡 class 类名。

可以通过以下 attribute 来自定义过渡类名：

enter-from-classenter-active-classenter-to-classleave-from-classleave-active-classleave-to-class

<diventer-active-class="animate__animated animate__bounce"leave-active-class="animate__animated animate__bounce">将要添加动画效果的dom元素</div>

animate.css官网 具体参数参考这里

wow.js:滚动时显示动画

有时需要搭配 wow.js实现动画

安装

npm install wow.jsnpm i animate.css

引入

在main.ts文件中引入

// 引入动画库import "animate.css"

全局引入

在main.ts 或者App.vue中初始化

import WOW from 'wow.js';let 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: any) {// 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});wow.init();

局部引入

在需要的组件中引用wow.js

import WOW from 'wow.js';

在生命周期里中初始化wow.js

let 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: any) {// 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});wow.init();

如果觉得《vue项目项目使用animate.css动画效果》对你有帮助，请点赞、收藏，并留下你的观点哦！