精华内容
下载资源
问答
  • Vue.js的vue2-animate 2跨浏览器CSS3动画库Animate.css的Vue.js端口。 与Vue的内置转换一起使用。 | Vue.js的DEMO Credit @h vue2-animate 2跨浏览器CSS3动画库Animate.css的Vue.js端口。 与Vue的内置转换一起使用。...
  • Vue.js 2和3的vue2-animate 跨浏览器CSS3动画库 一个的端口 。 与Vue的内置转换一起使用。 | 信用 是原始作者(仅适用于Vue 1.x)。 是SCSS版本的作者。 我只是项目维护者,如有任何更改或要求,请打开请求请求...
  • vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字).docx
  • npm install vue-animate-onscroll # or yarn add vue-animate-onscroll 建立 导入到您的Vue应用程序 import Vue from 'vue' import VueAnimateOnScroll from 'vue-animate-onscroll' Vue . use ( ...
  • 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,看一下如何使用呢...

                                    vue2集成vue2-animate插件实现常用动画

            vue的一些常用动画animate css来实现,针对vue2出现了一款插件vue2-animate,其实更权威的介绍在这里欢迎访问https://www.npmjs.com/package/vue2-animate,看一下如何使用呢?

    一、安装

    npm install --save vue2-animate

     

    二、main.js引入, 加入以下这句

    import 'vue2-animate/dist/vue2-animate.min.css'

     

    三、使用,在XXX.vue界面,脚手架生成的vue页面模板都是固定的

    <template>
      <transition name="bounce" enter-active-class="bounceInLeft" leave-active-    
       class="bouceOutRight">
        <div>
          ---------------------------------------
          ---------------------------------------
          ---------------------------------------
          ---------------------------------------
        </div>
      </transition>
    </template>

     

    关于name共有以下这几种

    Bounce

    • bounce
    • bounceDown
    • bounceLeft
    • bounceRight
    • bounceUp

    Fade

    • fade
    • fadeDown
    • fadeDownBig
    • fadeLeft
    • fadeLeftBig
    • fadeRight
    • fadeRightBig
    • fadeUp
    • fadeUpBig

    Rotate

    • rotate
    • rotateDownLeft
    • rotateDownRight
    • rotateUpLeft
    • rotateUpRight

    Slide

    • slideDown
    • slideLeft
    • slideRight
    • slideUp

    Zoom

    • zoom
    • zoomDown
    • zoomLeft
    • zoomRight
    • zoomUp

    可以试试效果

    展开全文
  • vue-animate-fullpage 功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端、pc)项目。 安装 npm install vue-animate-fullpage --save bug修复 1.1.1版本,修复由于后端生成跳转事件,类型不匹配,页面...
  • vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字) 第一步:安装vue-animate-number插件 $ npm install vue-animate-number 第二步:在main.js中引入 import Vue from 'vue' import ...

    vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字)
    第一步:安装vue-animate-number插件

    $ npm install vue-animate-number
    

    第二步:在main.js中引入

    import Vue from 'vue'
    import VueAnimateNumber from 'vue-animate-number'
    Vue.use(VueAnimateNumber)
    

    第三步:在组件中使用
    把所有用到的案例都在下面组件中写出

    <template>
      <div>
      
        <animate-number
          from="1" 
          to="10" 
          duration="1000" 
          easing="easeOutQuad"
          :formatter="formatter"
        ></animate-number>
        
         <!-- 最简单的案例,from是开始值,to是结束值 -->
        <animate-number from="1" to="10"></animate-number>
        
        <animate-number ref="myNum" from="0" to="10" mode="manual" :formatter="formatter"></animate-number><br>
        
         <!-- 也可以通过按钮去触发-->
        <button type="button" @click="startAnimate()"> animate! </button>
      </div>
    </template>
    
    <script>
      export default {
        methods: {
          formatter: function (num) {
            return num.toFixed(2)
          },
    
          startAnimate: function () {
            this.$refs.myNum.start()
          }
        }
      }
    </script>
    
    展开全文
  • 最近在使用vue-animate-onscroll插件,做元素滚动到视图进行动画效果。 但发现按官网上写的 在main里引入后会一直报错。 这是官网的引入用法 这就一直报错 然后找到他的源码内容。给他提取出来在一个js文件中,在...

    最近在使用vue-animate-onscroll插件,做元素滚动到视图进行动画效果。
    但发现按官网上写的 在main里引入后会一直报错。

    这是官网的引入用法
    在这里插入图片描述
    这就一直报错
    在这里插入图片描述
    然后找到他的源码内容。给他提取出来在一个js文件中,在main里直接引入这个js文件,完美好用。

    放上这个js文件

    var ScrollAnimate = () => {
      const e = e => "string" == typeof e,
        t = (e, t, n = "") => e.className = `${t} ${n}`.trim();
      return {
        isInView: ({
          top: e,
          bottom: t
        }) => e < (() => document.documentElement.clientHeight)() && t > 0,
        run(n, {
          value: i,
          modifiers: r
        }, {
          isUpwards: s,
          previousClassName: o = ""
        }) {
          if (!this.isInView(n.getBoundingClientRect())) return r.repeat && e(i) ? t(n, o) : void 0;
          if (e(i)) return t(n, o, i);
          if (r.repeat || (e => e.down && e.up)(i) || !((e = "", t = "") => e.trim() !== t.trim())(n.className, o)) {
            const e = s ? i.up : i.down;
            return t(n, o, e)
          }
          return (({
            params: e,
            isUpwards: t,
            repeat: n
          }) => n && (t && e.down || !t && e.up))({
            params: i,
            isUpwards: s,
            ...r
          }) ? t(n, o) : void 0
        }
      }
    };
    var index = {
      ScrollAnimate: ScrollAnimate,
      install(e) {
        e.directive("animate-onscroll", {
          inserted(e, t) {
            const n = ScrollAnimate(Date.now()),
              i = e.className;
            let r = window.pageYOffset;
            window.addEventListener("scroll", function () {
              let s = window.pageYOffset || document.documentElement.scrollTop;
              const o = s < r;
              n.run(e, t, {
                isUpwards: o,
                previousClassName: i
              }), r = s <= 0 ? 0 : s
            }, !1)
          }
        })
      }
    };
    export default index;
    
    

    然后在main里引入

    // 引入滚动动画
    import VueAnimateOnScroll from './util/animateScroll';
    Vue.use(VueAnimateOnScroll)
    

    用法就跟官网上的用法一样使用即可

      <div v-animate-onscroll="'animated flip'" class="anibox">Animate me once upon scroll</div>
        <!--如果每次滚动到当前位置 重复动画,则添加repeat -->
        <div v-animate-onscroll.repeat="'animated flip'" class="anibox">永远滚动时动画我</div>
    
        <!-- 如果每次 -->
        <div v-animate-onscroll.repeat="{up: 'animated slideInLeft'}" class="anibox">滚动方向 up</div>
        <div class="height"></div>
        <!--  -->
        <div v-animate-onscroll.repeat="{down: 'animated flip'}" class="anibox">滚动方向 down</div>
        <!-- 多个动画 -->
        <div v-animate-onscroll="{down: 'animated flip', up: 'animated rotateOut' }">多个动画</div>
    

    最后放上官网地址;
    https://www.npmjs.com/package/vue-animate-onscroll

    展开全文
  • 最近开发中用到了vue-animate-number组件,发现数据不能通过接口返回的值自动渲染。 解决办法: <animate-number from="1" :to="riskNumber" :key="riskNumber"> </animate-number> 原因是自己对...

    最近开发中用到了vue-animate-number组件,发现数据不能通过接口返回的值自动渲染。
    解决办法:

    <animate-number 
    from="1" 
    :to="riskNumber" 
    :key="riskNumber">
    </animate-number>
    

    原因是自己对animate-number 了解的不够多,添加一个key就可以自动渲染了。

    展开全文
  • 可以使用vue中的过渡transition,可以使用animate动画与transition配合使用,也可以单独使用animate动画库(详情可见vue官网-过渡:过渡),下面我们开始介绍在vue中单独使用animate动画,其实也非常简单,两步留...
  • 数字滚动插件————vue-animate-number 安装方式: npm install vue-animate-number 在vue中引用 import VueAnimateNumber from 'vue-animate-number' Vue.use(VueAnimateNumber) 例子代码 <template> &...
  • vue使用seiper-animate 前言: ​ Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果,开源、免费、稳定、使用简单、功能强大,是...
  • 参考:https://www.npmjs.com/package/vue-animate-onscroll 在线demo:https://vue-animate-onscroll.netlify.app/ <template> <div class="test"> <div style="height: 1200px;"></div&...
  • npm install vue-animate-number 2.在main.js中: import VueAnimateNumber from 'vue-animate-number' Vue.use(VueAnimateNumber) 二、核心代码: 1.页面: <animate-number ref="reNum" from="0" :to="toNum...
  • [Vue warn]: Hydration node mismatch: - Client vnode: animateTransform - Server rendered DOM: ​​ at <Home xss=removed> ref=Ref< undefined> > at at 兴趣点 /src/pages/Home.vue 。 其余文件无关紧要...
  • vue2使用animate css

    2019-09-29 21:05:07
    vue插件大集合:awesome-vuevue2插件: vue2-animate:vue2-animatevue2插件vue2-animateDEMO: vue2-animatedemo:vue2-animate-demo 我想用过animatecss的都知道这是一个极其简单而又酷炫的css动画库,但是我...
  • 使用为Vue2提供的简单vue动画编号。 现场演示 用法 $ npm install animated-number-vue # OR $ yarn add animated-number-vue < script > import AnimatedNumber from " animated-number-vue " ; export...
  • vue动画库 velocity-animate

    千次阅读 2019-07-15 16:07:13
    # npm i velocity-animate <template> <div> <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false"> <div v-show="show1"> show1 true ...
  • vue工程数字动画组件vue animate-number的使用与填坑 一、基本用法篇 (一)、环境配置 (二)、核心代码: (三)、API​ 二、填坑篇 1、用数组v-for动态传值渲染时候不显示值,显示NAN 2、提示找不到找不到...
  • vue2.x中使用animate.css

    2020-11-10 11:47:20
    最近在学习VUE+animate.css,入门遇到一些坑。先上几个链接: ...vue环境下使用animate.css:https://www.npmjs.com/package/vue2-animate; 1.vue环境,安装animate.css模块: cnpm install vue
  • 2、案例:https://wangdahoo.github.io/vue-animate-number vue-animate-number地址:https://github.com/wangdahoo/vue-animate-number 3、 ①、安装vue-animate-number插件 npm install vue-anim...
  • vue-animate-scroll一个小的Vue组件...设置npm i-保存vue-animate-scroll#或添加纱线vue-animate-scroll导入到主Javascript文件中从'vue'导入Vue从'vue-animate-scroll'导入VueAnimate Vue.use(VueAnimate)用法HTML
  • vue使用vue-awesome-swiper插件结合animate.css

    千次阅读 热门讨论 2019-09-20 10:32:37
    在前端使用swiper很多人都能想到使用swpier(网址...当你使用swipe时会发现每次使用都需要创建一个swiper对象,因此vue的生态系统中封装了vue-awesome-swiper插件,具体使用如下: 1、下载vue-awesome-swiper插件 n...
  • Vue Aos 一个Vue组件,用于在滚动时将Animation添加到Vue组件或HTML元素。 表中的内容 介绍 是一个了不起的API,可让您观察一个或多个HTMLElement进入或离开视口的时间。 当元素进入视口时,此API有许多用例,例如...
  • 本篇文章主要介绍了使用vue制作FullPage页面滚动效果,详细的介绍了FullPage页面的思路和实现,有兴趣的可以了解一下
  • 话不多说,代码如下 <template> <div> <... name="animate__animated animate__bounce animate__slower " enter-active-class="animate__fadeIn" leave-active-class="animate__f

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,307
精华内容 3,322
关键字:

vue2-animate

vue 订阅