vue2使用animate css[通俗易懂]

vue2使用animate css[通俗易懂]vue2使用animatecss先上几个链接vue插件大集合:awesome-vuevue2插件:vue2-animate:vue2-animatevue2插件vue2-animateDEMO:vue2-animatedemo:vue2-animate-demo我想用过animatecss的都知道这是一个极其简单而又酷炫的css动画库,但是我想在vue2中使用anima

大家好,又见面了,我是你们的朋友全栈君。

vue2使用animate css

先上几个链接

vue插件大集合:awesome-vue
vue2插件: vue2-animate:vue2-animate
vue2插件vue2-animateDEMO: vue2-animatedemo:vue2-animate-demo

我想用过animatecss的都知道这是一个极其简单而又酷炫的css动画库,但是我想在vue2中使用animatecss却是很麻烦的事。
其实vue的官网上在使用过度的时候就说过和animate配合很好什么的bulabula,但是要是用的话也好麻烦,还要自己根据过度类名的写法写css,或者绑定一堆属性,
但是但是,今天翻awesome-vue的时候正好看到有这么个插件:vue2-animate正好符合我们的需求

vue2-animate

这个插件呢是个纯css库,只是简单地将原来的animate的动画类名写成了可以被vue的过渡标签直接使用的类名了。虽然仅仅是如此就极大地方便了我们的使用。

使用vue2-animate

其实直接看他的github就非常快了
这里简单地复述一遍

安装

安装的方式有很多种
1> 在html文件中直接引用从github上下载的资源

 <link rel="stylesheet" href="vue2-animate.min.css">

2>如果使用webpack并且用对了css-loader可以使用npm 安装
npm安装包依赖

npm install --save vue2-animate

在main.js中引用

require('vue2-animate/dist/vue2-animate.min.css')
或者
import 'vue2-animate/dist/vue2-animate.min.css';

3>使用less

@import "<PATH_TO_SOURCE>/src/vue2-animate.less";

4>使用构建器编译

git clone https://github.com/asika32764/vue2-animate.git
cd vue2-animate
npm install
npm run build #Compiled .css files go to the dist folder

使用

1>基本的使用就是在过度元素上使用对应的name属性

<transition-group name="fadeLeft" tag="ul">
    <li v-for="item in items" v-bind:key="item">
        {
  
  { item }}
    </li>
</transition-group>

2>使用不同的载入载出动画
》》》第一种:使用custom-classes-transition,需要在不同的载入载出动画上加-enter和-leave后缀

<transition  name="custom-classes-transition" enter-active-class="bounceLeft-enter" leave-active-class="bounceRight-leave" >
  <p v-if="show">hello</p>
</transition>

》》》第二种:使用in/out类名在动画名后面加上In或者Out

<transition  name="bounce" enter-active-class="bounceInLeft" leave-active-class="bounceOutRight" >
  <p v-if="show">hello</p>
</transition>

现在支持的动画

Bounce

bounce
bounceDown
bounceLeft
bounceRight
bounceUp
Fade

fade
fadeDown
fadeDownBig
fadeLeft
fadeLeftBig
fadeRight
fadeRightBig
fadeUp
fadeUpBig


rotate
rotateDownLeft
rotateDownRight
rotateUpLeft
rotateUpRight
Slide

slideDown
slideLeft
slideRight
slideUp
Zoom

zoom
zoomDown
zoomLeft
zoomRight
zoomUp

祝,玩的愉快

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158129.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Pytest(5)美化插件进度条pytest-sugar[通俗易懂]

    Pytest(5)美化插件进度条pytest-sugar[通俗易懂]前言在我们进行自动化测试的时候,用例往往是成百上千,执行的时间是几十分钟或者是小时级别。有时,我们在调试那么多用例的时候,不知道执行到什么程度了,而pytest-sugar插件能很好解决我们的痛点。

  • 成员变量,类变量,局部变量的区别是什么_内部变量和局部变量

    成员变量,类变量,局部变量的区别是什么_内部变量和局部变量面向对象编程1.封装性面向对象编程核心思想之一就是将数据和对数据的操作封装在一起,通过抽象即从具体的实例中抽取共同的性质形成一般的概念。2.继承子类可以继承父类的属性和功能,即子类继承了父类所有的数据和数据上的操作,同时又可以添加子类独有的数据和数据上的操作。3.多态有两种意义的多态    1)操作名称的多态  2)和继承有关的多态类:

    2022年10月25日
  • 纯HTML CSS制作导航栏 下拉菜单

    纯HTML CSS制作导航栏 下拉菜单纯HTMLCSS制作导航栏下拉菜单

  • pycharm 批量替换_pycharm如何替换字符串

    pycharm 批量替换_pycharm如何替换字符串Pycharm中快速替换某个变量、某个字符可以使用Ctrl+R的快捷键来快速替换可以点击Replaceall来替换所有的匹配到的字符;如果要替换成空的,那么下面的输入框什么也不要输就可以。…

  • java递归无限层级树_算法基础课acwing下载

    java递归无限层级树_算法基础课acwing下载给定一棵 N 个节点的树,要求增加若干条边,把这棵树扩充为完全图,并满足图的唯一最小生成树仍然是这棵树。求增加的边的权值总和最小是多少。注意: 树中的所有边权均为整数,且新加的所有边权也必须为整数。输入格式第一行包含整数 t,表示共有 t 组测试数据。对于每组测试数据,第一行包含整数 N。接下来 N−1 行,每行三个整数 X,Y,Z,表示 X 节点与 Y 节点之间存在一条边,长度为 Z。输出格式每组数据输出一个整数,表示权值总和最小值。每个结果占一行。数据范围1≤N≤60001≤Z≤

  • 重定向和转发的区别及应用_重定向是什么意思

    重定向和转发的区别及应用_重定向是什么意思请求转发:客户首先发送一个请求到服务器端,服务器端发现匹配的servlet,并指定它去执行,当这个servlet执行完之后,它要调用getRequestDispacther()方法,把请求转发给指定的student_list.jsp,整个流程都是在服务器端完成的,而且是在同一个请求里面完成的,因此servlet和jsp共享的是同一个request,在servlet里面放的所有东西,在stude…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号