vue动画库-Animate.css的使用以及部分问题

Animate.css在vue脚手架中的使用

详情见官网： Animate.css | A cross-browser library of CSS animations.

两种使用方式

在style中使用

    <transition name="slide-fade"><div class="box" v-if="show" ></div></transition>

.box {width: 100px;height: 100px;background-color: orange;
}
.slide-fade-enter-active {animation: jello 1s;
}
.slide-fade-leave-active {animation: jello 1s;
}

注意：在style中需要删除animate__jello前面的 animate__

直接在 class类上使用

    <transition><div class="box animate__animated animate__jello" v-if="show" ></div></transition>

注意：在类上使用前面一定要加上animate__animated，复制内容要完整

自定义过渡类名上使用

    <transition enter-active-class="animate__animated animate__jello"><div class="box" v-if="show" ></div></transition>

问题：类上定义的动画无法规定其动画时间和动画延迟时间

解决办法：

.animate__animated.animate__jello{--animate-duration: 5s;  // 动画时间--animate-delay: 0.9s;  // 动画延迟生效时间
}

AOS.js滚动动画库

第一步：npm install aos --save

第二步在main.js中：

import AOS from "aos";
import "../node_modules/aos/dist/aos.css";
Vue.use(AOS)

第三步：在当前组件引入import AOS from “aos”;

mounted() {AOS.init();// 你也可以在这里设置全局配置AOS.init({offset: 200,   duration: 600,   //持续时间easing: 'ease-in-sine',   delay: 100})},

vue动画库-Animate.css的使用以及部分问题相关推荐

强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
前端之vue3使用动画库animate.css(含动画、过渡)
动画与过渡一.动画效果 1.默认动画实例动画语法 2.给transition指定name 二.过渡效果三.多个元素过渡四.vue3使用动画库动画库animate.css √ 五.总结一. ...
Vue引用第三方动画库animate.css
搜索animate.css - npm 进入它的主页,就可以看到很多动画样式在vscode中安装animate.css 在使用的组件上引用它给要使用的元素加上animata_animated an ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
性能强悍的CSS动画库--Animate.css
前言互联网圈子里有造"轮子"的说法,能用现成的就不要自己去捣鼓了,既省时又省力!今天介绍的就是一款性能强悍的CSS动画库(Animate.css)的使用指导. 安装方法方法一: ...
经典动画库 animate.css 的应用
一.animate.css animate.css::Animate.css 就像嗑水那么简单的CSS动画. 官网:Redirecting to Animate.css Animate.css是一个纯 ...
前端进阶必学必会动画学习之Animate.css的使用与解析：一个强大而酷炫的CSS3动画库Animate.css使用方法教程
简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut). ...
动画库Animate.css
笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...

vue动画库-Animate.css的使用以及部分问题

vue动画库-Animate.css的使用以及部分问题

Animate.css在vue脚手架中的使用

两种使用方式

问题：类上定义的动画无法规定其动画时间和动画延迟时间

AOS.js滚动动画库

vue动画库-Animate.css的使用以及部分问题相关推荐

最新文章

热门文章