精华内容
下载资源
问答
  • 、@keyframes、Animate.css、自定义添加class名一、定义CSS3属性中 @keyframs 中的动效 bounce-in<style> @keyframes bounce-in { 0% { transform: scale(0); } 50% { transfo...

    d8849da246b097b430e2524a4ee12879.png

    关键词:<transition>@keyframes、Animate.css库、自定义添加class名

    一、定义CSS3属性中 @keyframs 中的动效 bounce-in

    <style>
      @keyframes bounce-in {
        0% {
          transform: scale(0);
        }
        50% {
          transform: scale(1.5);
        }
        100% {
          transform: scale(1);
        }
      }
      .fade-enter-active{
          transform-origin: left center;
          animation: bounce-in 1s;
       }
      .fade-leave-active  { 
          transform-origin: left center; 
          animation: bounce-in 1s reverse;
       }
     </style>
    </head>
    
    <div id="root">
       <transition name="fade">
        <div v-if="show">hello miya</div>
       </transition>
      <button @click="handleClick">切换</button>
    </div>
    <script>
      var vm = new Vue({
        el: '#root',
        data: {
         show: true
        },
        methods: {
          handleClick: function(){
            this.show = !this.show //按钮控制页面的展示与否
          }
        }
      })
    </script>

    二、自定义添加class名

    自定义如: enter-active-class="xxx" 或 leave-active-class="xxx" ,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Vue中使用animate.css库</title>
      <script src='./vue.js'></script>
    <style>
       .active {
    	transform-origin: left center;
    	animation: bounce-in 1s;
        }
        .leave { 
    	transform-origin: left center; 
            animation: bounce-in 1s reverse;
         }
    </style>
    </head>
     <body>
       <div id="root">
         <transition 
          name="fade" 
          enter-active-class="active"  //自定义添加class名
          leave-active-class="leave"
         >
    	<div v-if="show">hello miya</div>
         </transition>
         <button @click="handleClick">切换</button>
       </div>
    	
        <script>
          var vm = new Vue({
    	el: '#root',
    	data: {
    	  show: true
    	},
    	methods: {
    	   handleClick: function(){
    	     this.show = !this.show //按钮控制页面的展示与否
    	   }
    	}
           })
        </script>
     </body>
    </html>

    三、使用Animate.css库

    复杂的CSS动画可以借助此库实现,节省效率和时间成本。

    1、注意:

    • 需要使用自定义的class名形式去使用此CSS动画库
    • class中需包含 animated 具体类名 + 具体动画名(根据现实需求)

    2、使用:

    • 引入Animate.css库的地址,这里我定义文件名为:animate.css
    • 使用 animated(引入动画)、如swing/bounce(使用具体动画)
    <div id="root">
       <transition 
          name="fade" 
          enter-active-class="animated swing"  //使用Animate.css库实例
          leave-active-class="animated bounce"
       >
          <div v-if="show">hello miya</div>
      </transition>
      <button @click="handleClick">切换</button>
    </div>

    3、完整代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Vue中使用animate.css库</title>
       <script src='./vue.js'></script>
       <link rel="stylesheet" type="text/css" href="./animate.css"> //引入Animate.css库的地址
    </head>
     <body>
       <div id="root">
         <transition 
    	 name="fade" 
    	 enter-active-class="animated swing"  
    	 leave-active-class="animated bounce"
         >
    	<div v-if="show">hello miya</div>
         </transition>
         <button @click="handleClick">切换</button>
       </div>
    	
     <script>
       var vm = new Vue({
         el: '#root',
         data: {
           show: true
         },
         methods: {
           handleClick: function(){
    	this.show = !this.show //按钮控制页面的展示与否
           }
         }
        })
      </script>
     </body>
    </html>
    展开全文
  • 、@keyframes、Animate.css、自定义添加class名一、定义CSS3属性中 @keyframs 中的动效 bounce-in<style> @keyframes bounce-in { 0% { transform: scale(0); } 50% { transfo...

    d73d680ebd5ca382cbbafd895b10748e.png

    关键词:<transition>@keyframes、Animate.css库、自定义添加class名

    一、定义CSS3属性中 @keyframs 中的动效 bounce-in

    <style>
      @keyframes bounce-in {
        0% {
          transform: scale(0);
        }
        50% {
          transform: scale(1.5);
        }
        100% {
          transform: scale(1);
        }
      }
      .fade-enter-active{
          transform-origin: left center;
          animation: bounce-in 1s;
       }
      .fade-leave-active  { 
          transform-origin: left center; 
          animation: bounce-in 1s reverse;
       }
     </style>
    </head>
    
    <div id="root">
       <transition name="fade">
        <div v-if="show">hello miya</div>
       </transition>
      <button @click="handleClick">切换</button>
    </div>
    <script>
      var vm = new Vue({
        el: '#root',
        data: {
         show: true
        },
        methods: {
          handleClick: function(){
            this.show = !this.show //按钮控制页面的展示与否
          }
        }
      })
    </script>

    二、自定义添加class名

    自定义如: enter-active-class="xxx" 或 leave-active-class="xxx" ,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Vue中使用animate.css库</title>
      <script src='./vue.js'></script>
    <style>
       .active {
    	transform-origin: left center;
    	animation: bounce-in 1s;
        }
        .leave { 
    	transform-origin: left center; 
            animation: bounce-in 1s reverse;
         }
    </style>
    </head>
     <body>
       <div id="root">
         <transition 
          name="fade" 
          enter-active-class="active"  //自定义添加class名
          leave-active-class="leave"
         >
    	<div v-if="show">hello miya</div>
         </transition>
         <button @click="handleClick">切换</button>
       </div>
    	
        <script>
          var vm = new Vue({
    	el: '#root',
    	data: {
    	  show: true
    	},
    	methods: {
    	   handleClick: function(){
    	     this.show = !this.show //按钮控制页面的展示与否
    	   }
    	}
           })
        </script>
     </body>
    </html>

    三、使用Animate.css库

    复杂的CSS动画可以借助此库实现,节省效率和时间成本。

    1、注意:

    • 需要使用自定义的class名形式去使用此CSS动画库
    • class中需包含 animated 具体类名 + 具体动画名(根据现实需求)

    2、使用:

    • 引入Animate.css库的地址,这里我定义文件名为:animate.css
    • 使用 animated(引入动画)、如swing/bounce(使用具体动画)
    <div id="root">
       <transition 
          name="fade" 
          enter-active-class="animated swing"  //使用Animate.css库实例
          leave-active-class="animated bounce"
       >
          <div v-if="show">hello miya</div>
      </transition>
      <button @click="handleClick">切换</button>
    </div>

    3、完整代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Vue中使用animate.css库</title>
       <script src='./vue.js'></script>
       <link rel="stylesheet" type="text/css" href="./animate.css"> //引入Animate.css库的地址
    </head>
     <body>
       <div id="root">
         <transition 
    	 name="fade" 
    	 enter-active-class="animated swing"  
    	 leave-active-class="animated bounce"
         >
    	<div v-if="show">hello miya</div>
         </transition>
         <button @click="handleClick">切换</button>
       </div>
    	
     <script>
       var vm = new Vue({
         el: '#root',
         data: {
           show: true
         },
         methods: {
           handleClick: function(){
    	this.show = !this.show //按钮控制页面的展示与否
           }
         }
        })
      </script>
     </body>
    </html>
    展开全文
  • vue canvas动效组件插件制作

    千次阅读 2018-02-06 14:32:40
    vue-canvas-effect canvas动画合集Vue组件

    vue-canvas-effect

    canvas动画合集Vue组件




    ? online demo | ? English document

    内容

    • [浏览器兼容]
    • [安装]
    • [使用]
      • [ES6]
        • [按需加载]
        • [全部引入]
      • [普通模式]
    • [组件列表]
      • [neon]
      • [bubbles]
    • [修改日志]
    • [贡献]
    • [TKS]

    浏览器兼容


    IE

    Firefox

    Chrome

    Safari

    iOS

    Android
    IE9+

    安装

    NPM

    npm install vue-canvas-effect --save
    复制代码

    使用

    ES6

    按需加载

    推荐 首先安装babel-plugin-import依赖

    npm install babel-plugin-import --save-dev
    复制代码

    然后修改 .babelrc文件

    // .babelrc
    {
      "plugins": [["import", {
        "libraryName": "vue-canvas-effect",
        "libraryDirectory": "src/components"
      }]]
    }
    复制代码

    然后,如果你需要neon组件,编辑main.js

    import Vue from 'vue'
    import {neon} from 'vue-canvas-effect';
    Vue.component(neon.name, neon);
    `or`
    Vue.component('customName', neon);
    new Vue({
      el: '#app',
      render: h => h(App)
    })
    复制代码

    全部引入

    不推荐

    import Vue from 'vue'
    import vueCanvas from 'vue-canvas-effect';
    Vue.use(vueCanvas)
    new Vue({
      el: '#app',
      render: h => h(App)
    })
    复制代码

    普通模式

    script 标签

    <html>
    <head>
      ...
    </head>
    <body>
       <div id="app">
            <neon-effect></neon-effect>
       </div>
       <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
       <script src="../dist/neon.min.js"></script>
       <script>
          new Vue({
               el: '#app'
            })
       </script>
    </body>
    </html>
    复制代码

    组件列表

    neon

    name: neonEffect

    // 默认标签名
    <neon-effect :options="options"></neon-effect>
    复制代码
    //default options
            {
              len: 20, //五边形的单边长度
              count: 50, //多少线重叠
              rate: 20, //速度 越小越快
              dieChance: 0.05, //单次绘画失败进行重绘的几率
              sparkChance: 0.1, //[0,1] 越大画出的五边形越多重
              sparkDist: 10, //闪烁点的距离
              sparkSize: 2,//闪烁点的大小
              contentLight: 60, // [0,100] 色块的亮度
              shadowToTimePropMult: 6, //五边形的内环阴影大小
              bgColorArr: [0, 0, 0] //背景色数组
            }
    复制代码

    bubbles

    name: bubblesEffect

    // 默认标签名
    <bubbles-effect :options="options"></bubbles-effect>
    复制代码
    //default options
            {
              color: 'rgba(225,225,225,0.5)', //气泡颜色
              radius: 15, //气泡半径
              densety: 0.3, // 气泡密度 越大越密集(建议不要大于1)
              clearOffset: 0.2 // 气泡消失距离[0-1] 越大越晚消失
            }
    复制代码

    修改日志

    See the GitHub 查看历史版本.

    贡献

    欢迎给出一些意见和优化,期待你的 Pull Request

    实现的方式还是相对简单的有兴趣的朋友可以一起来完善下这个项目 让canvas动画在vue里面用起来更加快捷。

    项目地址 vue-canvas-effect

    TKS

    circleMagic

    转载于:https://juejin.im/post/5a79bb7b5188257a5850cb92

    展开全文
  • 最近在做vue的项目,使用了element-ui作为ui组件,采用vuex进行状态管理,与后台的请求交互采用axios实现,原本做的页面,ajax请求个数也只有三个,将等待动画的显示和隐藏通过mutation去控制,但是项目越来越大...
  • 最近在做vue的项目,使用了element-ui作为ui组件,采用vuex进行状态管理,与后台的请求交互采用axios实现,原本做的页面,ajax请求个数也只有三个,将等待动画的显示和隐藏通过mutation去控制,但是项目越来越大...
        

    最近在做vue的项目,使用了element-ui作为ui组件库,采用vuex进行状态管理,与后台的请求交互采用axios库实现,原本做的页面,ajax请求个数也只有三个,将等待动画的显示和隐藏通过mutation去控制,但是项目越来越大,请求也越来越多,能否将这个等待动画与ajax的请求相关联呢?

    实现等待动效

    在element-ui中,提供了两个方法进行调用loading组件,一个是在需要遮罩的div容器中添加v-loading指令,另一种就是以服务形式调用:Loading.service(options),在本项目中,在加载数据时,进行全局遮罩,所以设置let loadingInstance = Loading.service({fullscreen:true})。关闭服务形式的调用:loadingInstance.close();

    axios的拦截器

    个人对拦截器的作用的理解是,在请求发送前和响应处理前,对该ajax请求进行一定的设置或者处理,方便对工程内的ajax请求进行统一处理,减少重复代码。

     //请求拦截器
      axios.interceptors.request.use((config) => {
        // 在发送请求之前做些什么
        return config;
      }, (error) => {
        // 对请求错误做些什么
        return Promise.reject(error);
      });
     // 添加响应拦截器
     axios.interceptors.response.use((response) => {
        // 对响应数据做点什么
        return response;
      }, (error) => {
        // 对响应错误做点什么
        return Promise.reject(error);
      });

    有了拦截器,我们可以想到,在ajax请求发送前开启loading动画,在接收响应后关闭loading动画。但是要对每个ajax都开关一下loading动画吗?其实不必。只需要实现一个ajax的计数器,在个数大于0时,开启动画,在个数为0的时候,关闭动画。

    计数器实现

    let loadCounter = (function(){
       let count = 0;
       let loadingInstance;
       const show = () => {
           if(count > 0){
              loadingInstance = Loading.service({fullscreen:true});
           } else {
             if(loadingInstance) {
                this.$nextTick(()=>{
                   loadingInstance.close():
                })
             }
           }
       }
       return {
           increment(){
             count ++;
             show();
           },
           decrement(){
              count--;
              show();
           }
       }
    })();

    在具体的项目工程里应用时,需要异步关闭loading,这是因为在有些时候,ajax请求发送的很快,还没有完全开启动画时,就已经关闭动画,这时的动画时不能关闭的,通过异步调用的方法可以保证动画的关闭都是有效的,不会出现动画关不掉的问题。$nextTick与vue组件实例生命周期相关,它指向的this必须是个vue组件,在实际应用时,可以将全局的vue组件作为this的指向。

    使用方法

     //请求拦截器
      axios.interceptors.request.use((config) => {
        loadCounter.increment();
        return config;
      }, (error) => {
        loadCounter.decrement();
        return Promise.reject(error);
      });
     // 添加响应拦截器
     axios.interceptors.response.use((response) => {
        loadCounter.decrement();
        return response;
      }, (error) => {
        //异常情况也要关闭loading
        loadCounter.decrement();
        return Promise.reject(error);
      });

    更新

    在实际项目中,需要对一些不需要显示等待动效的ajax请求进行设置例外,我将这些请求添加在白名单内,在计数器中设置白名单列表,修改如下。

    let loadCounter = (function(){
       let count = 0;
       let loadingInstance;
       let whiteList = [\/query\/record/];
       const show = (url) => {
           if(count > 0){
              let valid = true;
              whiteList.forEach(reg=>{
                 if(reg.test(url)){
                    valid = false;
                 }
              });
              if(valid){
                 loadingInstance = Loading.service({fullscreen:true});
              }
           } else {
             if(loadingInstance) {
                this.$nextTick(()=>{
                   loadingInstance.close():
                })
             }
           }
       }
       return {
           increment(url){
             count ++;
             show();
           },
           decrement(){
              count--;
              show();
           }
       }
    })();
    展开全文
  • Lottie是一个用于Android,iOS,Web和Windows的,用于解析使用Bodymovin导出为json的Adobe After Effects动画,并在移动设备和网络上呈现它们! 一、安装 Lottie npm install lottie-web 二、引入 import lottie
  • Vue学习笔记

    2019-03-18 11:47:44
    目录 一.vue基础知识 1.vue-cli创建项 二 vue资源使用总结 ...4.vue使用Animate.css动效库 5.vue使用ElementUI 6.vue使用echarts 7.vue 使用jquery 8.vue 使用jquery supersized插件实现幻灯片的效果...
  • 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件...
  • 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件...
  • 知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的。刚好目前的项目是利用vue框架的,两个凑在一起学了。 讲道理,这个用得好的话,页面是可以很酷的,譬如我现在写的项目 酷酷的登录页...
  • Mint UI 详细介绍Mint-UI 包含丰富的 CSS 和 JS 组件,能够满足...考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。依托 Vue.js 高...
  • 移动端vue ui框架总结

    千次阅读 2017-12-17 00:34:32
    Mint UI基于 Vue.js 的移动端组件Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。真正意义上的按需加载组件。可以只加载声明过的组件...
  • Vue状态过渡

    2019-08-23 09:53:40
    状态过渡概述状态动画与侦听器把过渡放到组件里赋予设计以生命 概述   Vue 的过渡系统提供了非常多简单的方法设置...有了这些数值后,我们就可以结合 Vue 的响应式和组件系统,使用第三方来实现切换元素的过渡状...
  • vue 过渡状态

    2017-08-24 11:41:00
    vue的过渡系统提供了非常多简单的方法设置进入、离开和列表...做到这一步,我们就可以结合vue的响应式和组件系统,使用第三方来实现切换元素的过渡状态。 状态动画与watcher 通过watcher我们能监听到任何数值属...
  • 在 jQuery 的时代,有很多动效非常流畅丝滑的拖拽排序插件,但在国内 Vue.js 起来后,却比较难找到一款像 Sortable.js 那样的组件,而 Vue.Draggable 就是一款基于 Sortable.js 开发的 Vue 增强...
  • 在 jQuery 的时代,有很多动效非常流畅丝滑的拖拽排序插件,但在国内 Vue.js 起来后,却比较难找到一款像 Sortable.js 那样的组件,而 Vue.Draggable 就是一款基于 Sortable.js 开发的 Vue 增强组件。官网...
  • Vue过渡状态

    2017-09-13 19:12:00
    前面的话  Vue 的过渡系统提供了非常多简单的方法设置进入、...做到这一步,我们就可以结合 Vue 的响应式和组件系统,使用第三方来实现切换元素的过渡状态 状态动画  通过watcher,能监听到任何数值属性的...
  • 在 jQuery 的时代,有很多动效非常流畅丝滑的拖拽排序插件,但在国内 Vue.js 起来后,却比较难找到一款像 Sortable.js 那样的组件,而 Vue.Draggable 就是一款基于 Sortable.js 开发的 Vue 增强组件。特点...
  • 40多个vue插件搜集

    2019-01-15 18:39:01
      VUE图片懒加载插件 Vue-Pull-To ... vue-city 城市选择器 ... vue-js-grid 活泼动效的拖动排序 vue-slicksort卡片拖动 vuesax 灵动的小组件 Vue.Draggable卡片拖动排 Vue-A...
  • 做到这一步,我们就可以结合 Vue 的响应式和组件系统,使用第三方来实现切换元素的过渡状态 状态动画 通过watcher,能监听到任何数值属性的数值更新 <input v-model.number=number type=number step=20> ...
  • 在 jQuery 的时代,有很多动效非常流畅丝滑的拖拽排序插件,但在国内 Vue.js 起来后,却比较难找到一款像 Sortable.js 那样的组件,而 Vue.Draggable 就是一款基于 Sortable.js 开发的 Vue 增强组件。 特点 支持...
  • GodYueのVue 学习笔记

    2020-02-29 13:17:22
    CSS的animation已经不是什么新技术了,在Web上随处都有可能看到CSS的animation实现的动效。而且社区中有关于使用animation实现动画的也非常的多,比如Animate.CSS 现在我们简单了解一下Vue中的过渡效果与动画效果 ...
  • Vue.js 状态过渡

    2018-11-21 20:15:04
    Vue 的过渡系统提供了非常多简单的方法设置...做到这一步,我们就可以结合 Vue 的响应式和组件系统,使用第三方来实现切换元素的过渡状态。 状态动画与侦听器 通过侦听器我们能监听到任何数值属性的数值更新。可...

空空如也

空空如也

1 2 3
收藏数 53
精华内容 21
关键字:

vue动效库

vue 订阅