精华内容
下载资源
问答
  • 17.Vue.js :过渡和动画 animate动画库

    千次阅读 2019-03-23 11:11:19
    <!DOCTYPE html> <html lang="en"> <head>...Vue动画</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>Vue动画</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./vue.js"></script>
        <link rel="stylesheet" href="animate.css">
    </head>
    
    <body>
        <div id="app">
            <!-- enter-active-class 定义进入动画的状态
              leave-active-class 定义离开动画的状态
           -->
            <transition enter-active-class='animated zoomIn' leave-active-class='animated hinge'>
                <p v-if='isShow'>{{name}}</p>
            </transition>
            <button @click='isShow=!isShow'>点击</button>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    name: 'vivi',
                    isShow: true
                }
            })
        </script>
    </body>
    
    </html>

     

    展开全文
  • 主要介绍了vue.js 实现点击展开收起动画效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要为大家详细介绍了vue.js实现回到顶部动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • three.jsJavaScript编写的WebGL第三方。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它通过控制相机、视角、材质等相关属性来创造大量3D动画场景。 我们开始引入three.js相关插件。 1、首先利用淘宝镜像...
  • 主要给大家介绍了利用Vue.js仿微信过渡动画左右切换效果的相关资料,需要用到的技术栈是Vue+Vuex。文中通过示例代码介绍的非常详细,对大家具一定的参考学习价值,需要的朋友们下面来一起看看吧。
  • VUE动画与animate.css动画库

    千次阅读 2019-10-31 14:22:13
    前言 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具: ...可以配合使用第三方 JavaScript 动画库,如 Velocity.js 过渡动画原理 在进入/离开的过渡中,会有 6 个...

    前言

    • Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:
    • 在 CSS 过渡和动画中自动应用 class
    • 可以配合使用第三方 CSS 动画库,如 Animate.css
    • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
    • 可以配合使用第三方 JavaScript 动画库,如 Velocity.js

    过渡动画原理

    • 在进入/离开的过渡中,会有 6 个 class 切换:
    • v-enter(插入)类原理—动画流程概念图
      在这里插入图片描述
    • v-enter第一帧加入,第二帧移除;v-enter-active第一帧加入、贯穿整个过程结尾移除;v-enter-to第二帧加入、贯穿整个过程结尾移除
    • v-leave(移除)类原理—动画流程概念图:
      在这里插入图片描述
    • 同理:第一帧(增加v-leave和v-leave-active)、第二帧(移除v-leave、增加v-leave-to),最后一帧(移除v-leave-active和v-leave-to)

    概念图

    在这里插入图片描述

    过渡

    • 首先回顾下过渡效果的实现
      在这里插入图片描述

    动画

    • 借助fade-leave-active和fade-enter-active贯穿整个过程的特性,可以这样去写动画效果
    • (1)首先将CSS代码修改如下
      在这里插入图片描述
    • (2)定义+调用动画效果
      在这里插入图片描述

    公共化动画名

    • 顾名思义,就是将动画名提取出来,以后直接使用即可。
    • 公共化动画名步骤:
    • 1、自行随意定义修改动画名
      在这里插入图片描述
    • 2、不使用默认提供的命名规范,在transition标签里添加相关属性
    • (1)enter-active-class属性
    • (2)enter-leave-class属性
      在这里插入图片描述
    • 公共化动画名小结:
    • 综上所述,当某些动画应用较多时,可以使用transition标签的enter-active-class属性和enter-leave-class属性调用公共的动画名。
    • 语法如下所示
      在这里插入图片描述

    Vue+animate.css动画库

    • 【前言】
    • 既然现在可以自己定义enter-active-class和leave-active-class动画类名,决定相关动画效果,借助这个特性,可以在vue项目里使用当前比较流行的animate.css动画库(https://daneden.github.io/animate.css)。
      在这里插入图片描述
    • Vue+animate.css动画库步骤
    • (1)下载代码库引入
      在这里插入图片描述
    • (2)选择相应动画效果类名并引入,如下所示
      在这里插入图片描述
    • 至此,便可以实现vue+animate.css动画库的结合使用
    • 优势:
    • 像某些比较复杂的动画效果,此时便省去手写过程,直接引入使用现有动画库即可,大大提高了开发效率。
    • 注意:
    • 1、必须使用transition标签的自定义动画名属性,即enter-active-class和leave-active-class
    • 2、使用时必须加入animated类名
    • CSS 动画与CSS 过渡用法类似,区别在于
    • ①在过渡中v-enter类名在元素被插入之前生效,在元素被插入之后的下一帧移除,即在节点插入 DOM 后会立即删除
    • ②在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animation end 事件触发时删除

    Vue之动画与animate.css动画库代码

    
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>demo</title>
    	<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
    	<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    	<style type="text/css">
    		.demo{
    			width: 200px;
    			height: 200px;
    			background: red;
    		}
    		.demo1{
    			width: 200px;
    			height: 200px;
    			background: green;
    		}
    		/*1、定义动画*/
    		@keyframes bounce{
    			0%{transform: scale(0);}
    			50%{transform: scale(1.5);}
    			100%{transform: scale(1);}
    		}
    		/*2、调用动画*/
    		.bounceIn{
    			transform-origin: left top;
    			animation: bounce 1s;
    		}
    		.bounceOut{
    			transform-origin: left top;
    			animation: bounce 1s reverse;
    		}
    
    	</style>
    	
    </head>
    <body>
    	<div id="root">
    		<transition 
    			enter-active-class="bounceIn animated fadeInLeft"
    			leave-active-class="bounceOut animated fadeOutDownBig"
    			name="fade">
    			<div class="demo" v-show="status"></div>
    		</transition>
    		<button @click="handleClick">toggle</button>
    	</div>
    	<script type="text/javascript">
    		var root = new Vue({
    			el:'#root',
    			data:{
    				status:false
    			},
    			methods:{
    				handleClick(){
    					this.status = !this.status;
    				}
    			}
    		})
    	</script>
    </body>
    </html>
    

    以上就是VUE之动画与animate.css动画库的见解,若有疑问请联系小编!

    展开全文
  • vue动画库使用aos.js

    2021-09-16 09:19:25
    vue动画库使用aos.js 官网:https://www.xyhtml5.com/examples/aos/ 第一步 安装 npm install aos --save 第二步在main.js中: import AOS from "aos"; import "../node_modules/aos/dist/aos.css"; Vue.use(AOS) ...

    vue中动画库使用aos.js

    官网:https://www.xyhtml5.com/examples/aos/

    第一步

    安装 npm install aos --save

    第二步在main.js中:

    import AOS from "aos";
    import "../node_modules/aos/dist/aos.css";
    Vue.use(AOS)
    

    第三步

    在当前组件引入import AOS from “aos”;

    mounted() {
         AOS.init();
         // 你也可以在这里设置全局配置
          AOS.init({
            offset: 200,   
            duration: 600,   //持续时间
            easing: 'ease-in-sine',   
            delay: 100
         })
        },
    
    展开全文
  • vue项目中使用js动画库velocity 在vue中通过js实现动画vue中通过js实现动画使用的是vue提供的动画钩子函数。 before-enter:入场动画还未开始执行时 enter:入场动画开始执行 after-enter:入场动画执行结束...

    在vue项目中使用js动画库velocity

    在vue中通过js实现动画

    在vue中通过js实现动画使用的是vue提供的动画钩子函数。

    1. before-enter:入场动画还未开始执行时
    2. enter:入场动画开始执行
    3. after-enter:入场动画执行结束
    4. before-leave:出场动画还未开始执行时
    5. enter:出场动画开始执行
    6. after-leave:出场动画执行结束
    <template>
        <div>
            <transition
                name="fade"
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="handleAfterEnter"
            >
                <div v-if="show">transition标签</div>
            </transition>
            <button @click="handleClick">切换</button>
        </div>
    </template>
    <script>
    import Velocity from 'velocity-animate'
    export default {
        name:"Four",
        data() {
            return {
                show:true
            }
        },
        methods: {
            handleClick:function(){
                this.show = !this.show;
            },
            handleBeforeEnter:function(el){
                //el指动画包裹的div标签
                alert("handleBeforeEnter")
                el.style.color = "red";
            },
            handleEnter:function(el,done){
                // done回掉函数,当动画执行完成之后需要手动的调用done函数,相当于告诉vue此时动画已经执行完成。
                // 当done函数调用完成之后,vue会触发另外一个函数即handleAfterEnter
                // alert("handleEnter")
                setTimeout(function(){
                    el.style.color = "green";
                    // done();
                },2000)
                setTimeout(function(){
                    done();
                },4000)
            },
            handleAfterEnter:function(el){
                alert("handleAfterEnter");
                el.style.color = "red";
            }
    }
    </script>
    <style scoped></style>
    

    在vue中使用js动画库velocity

    安装

    cnpm install velocity-animate@beta
    

    引用

    在需要使用的组件中引用

    import Velocity from 'velocity-animate'
    

    调用

    在js动画的钩子函数中使用

    <template>
        <div>
            <transition
                name="fade"
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="handleAfterEnter"
            >
                <div v-if="show">transition标签</div>
            </transition>
            <button @click="handleClick">切换</button>
        </div>
    </template>
    <script>
    import Velocity from 'velocity-animate'
    export default {
        name:"Four",
        data() {
            return {
                show:true
            }
        },
        methods: {
            handleClick:function(){
                this.show = !this.show;
            },
            handleBeforeEnter:function(el){
                el.style.opacity = 0;
            },
            handleEnter:function(el,done){
                Velocity(el,{opacity:1},{duration:1000,complete:done})
                //让el元素的opacity缓慢的变成1,并耗时1s,当动画执行完毕之后complete对应的属性内容会被执行(即执行done函数)
            },
            handleAfterEnter:function(){
                alert("动画结束")
            }
        },
    }
    </script>
    <style scoped>
    </style>
    
    展开全文
  • vue中常用的动画库

    千次阅读 2021-05-24 16:04:23
    vue中常用的动画库 <div data-aos="fade-up"></div> mounted(){ AOS.init(); // 你也可以在这里设置全局配置 AOS.init({ offset:200, duration:600, //持续时间 easing:'ease-in-sine', delay...
  • SVG图表值,标签,百分比显示二维图形支持图例显示悬停时的详细百分比细分动画实色和渐变填充水平和垂直图表这是FunnelGraph.jsVue.js版本,了解有关该的更多信息并查看文档这里。 在线演示演示CodePen演示开发...
  • 为了应用过渡效果,需要在目标元素上使用 transition 特性: <div v-if=show transition=my-transition></div> transition 特性可以与...尝试以 ID “my-transition” 查找 JavaScript 过渡钩子对象——通过 Vue.tra
  • 一个Vue.js组件来绘制动画的圆形进度条 如下画动画进度圈, 安装 // For Vue.js 2.0+ npm install vue2-circle-progress 用法 导入模块 与其他任何Vue组件一样,将其注册为组件 在模板中使用它 例 A Vue.js ...
  • 本文实例为大家分享了vue+animation实现翻页动画展示的具体代码,供大家参考,具体内容如下 前端在做数据展示的时候,可能提留页面时间较长,导致数据不能及时更新,你可以定时更新,也可以做一个假数据 给用户视觉...
  • Vue动画与animate.css动画库

    千次阅读 2019-10-31 14:22:14
    前言 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具: ...可以配合使用第三方 JavaScript 动画库,如 Velocity.js 过渡动画原理 在进入/离开的过渡中,会有 6 ...
  • 用于VueJS的简单美观的卡片组件,带有精美的火花线。 演示可以在此处找到该组件的实时...安装npm i -S vue-info-card用法安装后,可以通过传递适当的道具来使用组件来显示数据和消息。 单个文件组件中的用法示例如下:
  • vue.js组件 Vue-Dice-Component (vue-dice-component) Animable 3D dice component library for Vue.js It is rendered by 3D... Vue.js的可动画3D骰子组件通过CSS3的3D转换呈现。 特征 (Features) D6 D6 D10...
  • Typed.js是一个类型。 输入任何字符串,并观看它以您设置的速度键入,退格所键入的内容,并为所设置的许多字符串开始一个新句子。 在签出正式项目。 目录 安装 npm install --save vue-typed-js 默认导入 安装...
  • 这是基于Vue的冒泡算法以及选择排序算法的动画实现过程,其中动画效果使用的是CSS的特性。由于是使用的Vue所以不需要频繁的操纵Dom树,只需要直接更改绑定的数据即可。 此代码运行结果见博客:...
  • 主要介绍了VueJS动画与Velocity.js的结合使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 英文 | https://javascript.plainenglish.io/top-15-vue-js-animation-libraries-e173fdefb49b翻译 | 小爱1...
  • Vue动画库

    2020-06-15 23:28:59
    vue动画库 velocity-animate NPM 1:npm i velocity-animate <template> <div> <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false"> <div v-show=...
  • VUE之过渡transition Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。...在过渡动画钩子函数中使用 JavaScript 直接操作 DOM—JS动画 可以配合使用第三方 JavaScript 动画库,如 Velocit...
  • vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现...
  • 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view...
  • Vue Aos 一个Vue组件,用于在滚动时将Animation添加到Vue组件或HTML元素。 表中的内容 介绍 是一个了不起的API,可让您观察一个或多个HTMLElement进入或离开视口的时间。 当元素进入视口时,此API有许多用例,例如...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,111
精华内容 12,844
关键字:

vue动画js库

vue 订阅