zoukankan      html  css  js  c++  java
  • VUE.js入门学习(4)-动画特效

    1、VUE中CSS动画原理(more是  v-enter 具体的根据 name的来决定)

    动画是通过在某一时间段来添加样式决定的。

    要通过 transition进行包裹。

     2、在VUE中使用 animate.css库

    (1)不用name的另外一种写法

     

    (2)使用animate.css库( 库名+动画名   ---@keyframes类型的 )

    第一次刷新的时候页面就出现动画效果

     (3)在VUE中同时使用过渡和动画

    type="transition" 就是按照 transition的动画时间来计数。

    第一次就有动画:appear 、 appear-~

     自己定义时间:  :duration="20000" 或者复杂点的 :duration="{enter:5000,leave:10000}"

    3、在VUE中的JS动画与Velocity.js

    (1)根据js钩子来实现  @before-enter  对应的就是  @before-leave  ~~~   done()很重要

     (2)Velocity.js的使用

     4、Vue中多个元素或组建的过渡  dom会复用,给每个添加一个key值就可以了

     

    先进来在隐藏的效果

     

     5、VUE中列表过渡

     6、VUE中动画的封装

  • 相关阅读:
    二叉树
    bfs
    E-Gold Coins
    D-We Love MOE Girls
    A
    哈希--查找出现过的数字
    二分查找
    KMP简单应用
    KMP算法(2)
    [JSOI2008]最大数
  • 原文地址:https://www.cnblogs.com/chengmingxiaowu/p/9144814.html
Copyright © 2011-2022 走看看