精华内容
下载资源
问答
  • vue2使用animate css

    万次阅读 2017-04-28 15:00:53
    vue2使用animate css先上几个链接 vue插件大集合:awesome-vue vue2插件: vue2-animatevue2-animate vue2插件vue2-animateDEMO: vue2-animatedemo:vue2-animate-demo 我想用过animatecss的都知道这是一个...

    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

    祝,玩的愉快

    展开全文
  • vue使用animate

    2019-12-02 14:23:18
    cnpm install animate.css --save// 在main.js中引入 import animate from '...Vue.use(animate) //使用 注意class <div class="animated bounceInDown slow"> animate </div> 官网地址:https...
     cnpm install animate.css --save//
    

    在main.js中引入

    import animate from 'animate.css'
    Vue.use(animate)
    
    //使用  注意class
    <div class="animated bounceInDown slow">
        animate
       </div>
    

    官网地址:https://daneden.github.io/animate.css/

    展开全文
  • vueanimate

    2019-07-26 14:34:30
    vueanimate.css用法 1.先下载 cnpm install animate.css --save 2.引入 import animated from 'animate.css' Vue.use(animated) 3.用法 <div v-if="nextStatus==false" ref="statusOne" <!--添加类名...

    vue中animate.css用法

    1.先下载

    cnpm install animate.css --save
    

    2.引入

    import animated from 'animate.css' 
    Vue.use(animated)
    
    

    3.用法

      <div v-if="nextStatus==false" ref="statusOne"
           <!--添加类名的方式-->
           class="animated rotateInDownRight">
          <div class="phone_number code_popup">
              <div class="phoneTitle">
                  <span>+86</span>
              </div>
              <span>{{phoneNumber}}</span>
     </div>
    

    fade

    title 淡入淡出
    fadeIn 淡入
    fadeInDown 向下淡入
    fadeInDownBig 向下快速淡入
    fadeInLeft 向右淡入
    fadeInLeftBig 向右快速淡入
    fadeInRight 向左淡入
    fadeInRightBig 向左快速淡入
    fadeInUp 向上淡入
    fadeInUpBig 向上快速淡入
    fadeOut 淡出
    fadeOutDown 向下淡出
    fadeOutDownBig 向下快速淡出
    fadeOutLeft 向左淡出
    fadeOutLeftBig 向左快速淡出
    adeOutRight 向右淡出
    fadeOutRightBig 向右快速淡出
    fadeOutUp 向上淡出
    fadeOutUpBig 向上快速淡出

    bounce

    title 弹跳类
    bounceIn 弹跳进入
    bounceInDown 向下弹跳进入
    bounceInLeft 向右弹跳进入
    bounceInRight 向左弹跳进入
    bounceInUp 向上弹跳进入
    bounceOut 弹跳退出
    bounceOutDown 向下弹跳退出
    bounceOutLeft 向左弹跳退出
    bounceOutRight 向右弹跳退出
    bounceOutUp 向上弹跳退出

    zoom

    title 缩放类
    zoomIn 放大进入
    zoomInDown 向下放大进入
    zoomInLeft 向右放大进入
    zoomInRight 向左放大进入
    zoomInUp 向上放大进入
    zoomOut 缩小退出
    zoomOutDown 向下缩小退出
    zoomOutLeft 向左缩小退出
    zoomOutRight 向右缩小退出
    zoomOutUp 向上缩小退出

    rotate

    title 旋转类
    rotateIn 顺时针旋转进入
    rotateInDownLeft 从左往下旋入
    rotateInDownRight 从右往下旋入
    rotateInUpLeft 从左往上旋入
    rotateInUpRight 从右往上旋入
    rotateOut 顺时针旋转退出
    rotateOutDownLeft 向左下旋出
    rotateOutDownRight 向右下旋出
    rotateOutUpLeft 向左上旋出
    rotateOutUpRight 向右上旋出

    flip

    title 翻转类
    flipInX 水平翻转进入
    flipInY 垂直翻转进入
    flipOutX 水平翻转退出
    flipOutY 垂直翻转退出

    strong

    title 强调类
    bounce 弹跳
    flash 闪烁
    pulse 脉冲
    rubberBand 橡皮筋
    shake 左右弱晃动
    swing 上下摆动
    tada 缩放摆动
    wobble 左右强晃动
    jello 拉伸抖动
    展开全文
  • vue animate.css

    2020-06-16 14:32:30
    NPM npm install v-animate-css --save Usage import Vue from 'vue'; import AnimateCss from 'animate.css'; Vue.use(AnimateCss);

    Install

    • with npm
      npm install v-animate-css --save-dev
    • with yarn
      $ yarn add animate.css
    • using a CDN
     <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
      />
    

    Usage

    //main.js  引用
    import Vue from 'vue';
    import AnimateCss from 'animate.css' / 'v-animate-css';
    Vue.use(AnimateCss);
    
    自定义过渡类名包括:
    		enter-class
    		enter-active-class
    		enter-to-class
    		leave-class
    		leave-active-class
    		leave-to-class
    
    <button @click="show = !show">Toggle show</button>
     <transition name="custom-classes-transition" 
              enter-active-class="animated fadedIn" //进入
              leave-active-class="animated fadedOut"//离开
              :duration="{enter:100,leave:100}" //延迟时间  
               //v-on:/:/@监听
              v-on:before-enter="beforeEnter(ele)"  
              :enter="enter(ele)" 
              @after-enter="afterEnter(ele)" 
    >
    <div class="block" v-if="show">动画内元素靠show判断是否显示</div> 
    </transition>
              beforeEnter(ele,done){
                  ele.style.opacity= 0;
                  ele.style.transformOrigin=center;
                    console.log("动画进入之前");
                    done();  //继续下一个
              }
              enter(ele){
                    console.log("动画进入");
                    Velocity=({},{})
              }
              afterEnter(ele){
                    console.log("动画进入之后")
              }
    
    列表过渡transition-group
    v-for渲染时,需要使用<transition-group>组件,同时要注意以下:
    列表中的每一项有唯一属性值,
    该元素默认会渲染为<span>,,可以通过tag特性替换,tag="div"
    
          <transition-group
            enter-active-class="animated bounceInLeft"
            leave-active-class="animated bounceOutLeft"
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            tag="div">
            <mt-cell class="cellmat" v-for="(item, index) in friends" v-bind:key="item.id"
              :title="item.name"
              :value="item.address"
              :data-index="index"></mt-cell>
          </transition-group>
    
    展开全文
  • 关于Vue.js无法使用animated.css问题 声明: 首先,目前官网https://animate.style/ 给的是 V4 版本,V4 版本进行了一些改进,改进了动画,并添加了新动画,应用 animate.css 类添加了前缀,默认为animate_ , 因此...
  • Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm install animate.css --save Install with yarn: ...
  • Vue.js 2和3的vue2-animate 跨浏览器CSS3动画库 一个的端口 。 与Vue的内置转换一起使用。 | 信用 是原始作者(仅适用于Vue 1.x)。 是SCSS版本的作者。 我只是项目维护者,如有任何更改或要求,请打开请求请求...
  • vue引入animate使用

    2020-05-21 14:45:29
    暂时使用animate做侧边栏显示和隐藏 侧边栏的动画效果,找了element-ui内置有上下折叠,没找到...import 'vue2-animate/dist/vue2-animate.min.css' <transition enter-active-class="slideInLeft" leave-active
  • Vue2.0整合Animate

    2020-05-21 21:48:27
    说明:网上很多导入使用很多都用不了...import 'vue2-animate/dist/vue2-animate.min.css' 第二种: 直接vue的根目录中找到index.html 在head中引入 <link href="https://cdn.jsdelivr.net/npm/animate.cs.
  • VueAnimate

    2017-09-27 10:49:01
    Animate是一个基于CSS3的动画库,集成了很多实用的动画。 引入Animate引入Animate的方式有多种: 1、CDNcdn的话可以自己去网上找,我一般的是CDN。复制了link标签或者是url地址后,以link标签的形式插入到项目的入口...
  • vue集成vue2-animate插件实现常用动画

    千次阅读 2019-05-21 15:00:56
    vue2集成vue2-animate插件实现常用动画 vue的一些常用动画animate css来实现,针对vue2出现了一款插件vue2-animate,其实更权威的介绍在这里欢迎访问https://www.npmjs.com/package/vue2-animate,看一下如何使用呢...
  • animated-vue, 使用 animate.css 动画作为Vue2过渡的插件 动画 vue使用 animate.css 动画作为Vue2过渡的插件演示: 即将推出 !安装和使用从npm安装动画 vue 和收费的animate.cssnpm install --save animated-vue ...
  • Vue中使用animate

    2021-02-02 18:31:57
    1.安装         npm install animate.css 2.main.js中引用   ...import animated from ‘animate.css’ ...Vue.use(animated); 3.在页面中 (1)animat
  • vue swiper animate如何使用

    千次阅读 2019-12-03 18:05:23
    先安装: npm install animate.css --save 上代码: main.js: import animated from 'animate.css' Vue.use(animated) HTML: <div class="ani" swiper-animate-effect="bounceInDown" swiper-animate-d...
  • 1.安装 npm install animate.css --save 2.引入使用 2.1. 全局引入使用 ...Vue.use(animate) 2.2.局部引入使用(比较推荐这种方式) <style lang="scss" scoped> @import '../../node_modules/animate...
  • Vue 集成 Animate.css

    2018-09-26 09:09:30
    通过CSS实现了很多动画效果,可以直接调用 更多精彩 更多技术博客,请移步 asing1elife’s blog 官网 ...import Vue from 'vue' ... import 'assets/plugins/animate/animate.css' ... /* e...
  • 可以使用vue中的过渡transition,可以使用animate动画与transition配合使用,也可以单独使用animate动画库(详情可见vue官网-过渡:过渡),下面我们开始介绍在vue中单独使用animate动画,其实也非常简单,两步留...
  • vue中使用animate css

    千次阅读 2019-02-20 17:18:51
    vue2使用animate css 安装 安装的方式有很多种 1.在html文件中直接引用从github上下载的资源 &lt;link rel="stylesheet" href="vue2-animate.min.css"&gt; 2.如果使用webpack并且用对...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,321
精华内容 528
关键字:

animatevue

vue 订阅