vue中使用animate.css库

最新推荐文章于 2024-05-08 19:37:26 发布

哒玲

最新推荐文章于 2024-05-08 19:37:26 发布

阅读量4k

点赞数

分类专栏： vue基础学习文章标签： vue animate.css 动画

本文链接：https://blog.csdn.net/zl13015214442/article/details/87905311

版权

1、@keyframes
keyframes翻译成中文，是"关键帧"的意思，使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。
– 自定义实现
下面我们来看一个例子，要实现的效果是文字弹跳放大在缩小显现和隐藏：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>在vue中使用Animate.css库</title>
  <link rel="stylesheet" href="./animate.css">
  <script src="../node_modules/vue/dist/vue.js"></script>
  <style>
    @keyframes bounce-in {
      0% {
        transform:scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
    .zl { /*在div隐藏的过程中这个class是一直存在的*/
      transform-origin: left center;
      animation: bounce-in 1s;
    }
    .gyz{   /*在div显示的过程中这个class是一直存在的

最低0.47元/天解锁文章

哒玲

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue中使用animate.css库

1、@keyframeskeyframes翻译成中文，是&quot;关键帧&quot;的意思，使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。– 自定义实现下面我们来看一个例子，要实现的效果是文字弹跳放大在缩小显现和隐...
复制链接

扫一扫