animate.css
1、安装
npm install animate.css --save
2、导入
import 'animate.css';
3、使用
<template>
<div>
<button @click="isShow = !isShow">toggle</button
<transition name="slide-fade">
<div class="box" v-if="isShow"></div>
</transition>
</div>
</template>
效果
设置动画速度
设置延迟
wicked.CSS
下载完成后引入
<link rel="stylesheet" href="css/wickedcss.min.css">
<div class="barrelRoll"> Place your content here </div>
可以配合jqurey一起使用
当动画元素距离屏幕顶部 450 像素时,将触发动画。
<script>
$(window).scroll(function() {
$('#animatedElement').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+450) {
$(this).addClass("barrelRoll");
}
});
});
</script>