[游戏开发]vue中动画库的使用

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>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖