首页 > Web开发 > 详细

vue+ webpack中的animate.css实现的执行多个连续的动画

时间:2017-04-05 11:54:05      阅读:2682      评论:0      收藏:0      [点我收藏+]

1.安装

npm install animate.css

技术分享

 

2.使用方法

入口文件App中进行引入 import animate from ‘animate.css‘

3.多个连续的动画

技术分享

 

实现的效果:实现了三个蓝色方块依次以不同效果展现出来。

模板中代码:

  <template>
    <div class="hello">
      <div class="box rotateIn" style="animation-duration:2s;animation-delay:1s;animation-iteration-count:1;animation-fill-mode:both;"></div>
      <div class="box fadeInLeft" style="opacity:0;animation-duration:3s;animation-delay:2s;animation-iteration-count:1;animation-fill-mode:both;">                  </div>
      <div class="box fadeInUp" style="opacity:0;animation-duration:3s;animation-delay:3s;animation-iteration-count:1;animation-fill-mode:both;">                  </div>
           </div>
  </template>

样式表:

<style scoped>
  .box{width:100px;height:80px;background: blue;margin:5px;}
</style>

animate.css代码解析:

animation-duration---动画持续时间

animation-delay---动画延迟时间,多个元素,延迟时间要依次累加

animation-iteration-count---动画执行次数

animation-fill-mode:both---设置对象状态为动画结束或开始的状态

 

ps:还可以写成样式.xxx{animation-duration:2s;animation-delay:4s;animation-fill-mode:both;}

别忘了添加前缀~~

vue+ webpack中的animate.css实现的执行多个连续的动画

原文:http://www.cnblogs.com/itbainianmei/p/6667853.html

(1)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!