Vue中css动画过渡效果(二)

2019年3月17日09:07:10 发表评论 阅读(173)

Vue中css动画过渡效果(二)

上篇文章我们说到了在过渡效果中CSS样式的类名是可以自定义的,官方提供了6个可以自定义的特性,这6个特性分别是:

  • enter-class
  • enter-active-class
  • enter-to-class</code> (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class</code> (2.1.8+)

具体用法:

  1. <transition
  2.             name="fade"
  3.             enter-active-class="active"
  4.             leave-active-class="leave"
  5.             enter-class="start"
  6.             leave-to-class="end"
  7.     >
  1. .active, .leave {
  2.             transition: opacity .5s;
  3.         }
  4.         .start, .end {
  5.             opacity: 0;
  6.         }

这样一来就可以用我们自定义的类名来实现之前一样的效果。

使用animate.css

使用之前我们先写一下动画样式:

  1. /**
  2.        *使用@keyframes规则,可以创建动画,bounce-in为动画名字
  3.        *transform这个属性可以实现元素旋转,缩放,移动,倾斜等。
  4.        *transform属性中scale值可以定义缩放转换
  5.        *0%是开头动画,100%是当动画完成。
  6.        *animation指定要绑定的动画名字,2s表示指定动画播放完成花费的时间
  7.        *transform-Origin属性表示允许更改转换元素的位置。
  8.        */
  9.        @keyframes bounce-in {
  10.            0% {
  11.                transform: scale(0);
  12.            }
  13.            50% {
  14.                transform: scale(2);
  15.            }
  16.            100% {
  17.                transform: scale(0);
  18.            }
  19.        }
  20.        .fade-enter-active {
  21.            transform-Origin: left center;
  22.            animation: bounce-in 2s;
  23.        }
  24.        .fade-leave-active {
  25.            transform-Origin: left center;
  26.            animation: bounce-in 2s;
  27.        }

为什么用.fade-enter-active.fade-leave-active这两个类名,是因为他们在动画整个过程都存在。

接下来就说到我们的主角animate.css流行库了,库里面有很多好玩的效果,这样我们就不用重复造轮子了,重复造轮子我们是不提倡的,那么要怎么使用呢?

首先

  1. <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

 然后

  1. <transition
  2.             name="fade"
  3.             enter-active-class="animated swing"
  4.             leave-active-class="animated shake"
  5.     >
注意

使用animate.css库时

  1. 必须使用自定义类名的形式
  2. 必须包含animated类,animated后是具体的效果名字

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛