精华内容
下载资源
问答
  • 本文实例讲述了vue动画效果实现方法。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net vue动画</title> ...
  • 本文介绍了5分钟学会Vue动画效果(小结),分享给大家,具体如下: 1.哪些元素/那些组件适合在那些条件下实现动画效果 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 简单经典例子:(文字...
  • 简单的vue动画效果

    2019-04-10 16:02:06
    显示、隐藏动画效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src=...

    显示、隐藏动画效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
    	<style type="text/css">
    		/* 显示动画效果 */
    		.v-enter{
    			opacity: 0
    		}
    		.v-enter-active{
    			transition: opacity 3s;
    		}
    		/* 隐藏动画效果 */
    		.v-leave-to{
    			opacity: 0;
    		}
    		.v-leave-active{
    			transition: opacity 3s;
    		}
    	</style>
    </head>
    <body>
    	<div id="root">
    		<!-- 被transition标签包裹的元素会有动画效果(自动会添加css样式以及删除),transition标签没有name属性则默认为样式名以v开头,若有如name是tran的则样式为tran-enter,tran-enter-active -->
    		<transition>
    		<div v-if="show">hello world</div>
    		</transition>
    		<button @click="handleClick">切换</button>
    	</div>
    	<script type="text/javascript">
    		var vm=new Vue({
    			el:"#root",
    			data:{
    				show:false
    			},
    			methods:{
    				handleClick:function(){
    					this.show=!this.show;
    				}
    			}
    		})
    	</script>
    </body>
    </html>

    css3 @keyframe写法

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    	<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>
    <body>
    	<div id="root">
    		<!-- 被transition标签包裹的元素会有动画效果(自动会添加css样式以及删除),transition标签没有name属性则默认为样式名以v开头,若有如name是tran的则样式为tran-enter,tran-enter-active -->
    		<transition name="fade">
    		<div v-if="show">hello world</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>

    第二种可以指定css名字
     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    	<style>
    		/* 过渡动画效果(缩小放大) */
    		@keyframes bounce-in {
    			0% {
    				transform: scale(0);
    			}
    			50% {
    				transform: scale(1.5);
    			}
    			100% {
    				transform: scale(1);
    			}
    		}
    		.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标签包裹的元素会有动画效果(自动会添加css样式以及删除),transition标签没有name属性则默认为样式名以v开头,若有如name是tran的则样式为tran-enter,tran-enter-active -->
    		<transition name="fade"
    		enter-active-class="active"
    		leave-active-class="leave"
    		>
    		<div v-if="show">hello world</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封装样式

    第一次载入页面也自带动画效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    	<link rel="stylesheet" type="text/css" href="./animate.css">
    </head>
    <body>
    	<div id="root">
    		<!-- 被transition标签包裹的元素会有动画效果(自动会添加css样式以及删除),transition标签没有name属性则默认为样式名以v开头,若有如name是tran的则样式为tran-enter,tran-enter-active -->
    		<!-- 第一次页面载入也有动画效果只要加appear属性就行了 -->
    		<transition name="fade"
    		appear
    		enter-active-class="animated swing"
    		leave-active-class="animated shake"
    		appear-active-class="animated swing"
    		>
    		<div v-if="show">hello world</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>

    过渡效果和动画效果混合写法(其实也就是把上面的效果写在一起而已)
     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    	<link rel="stylesheet" type="text/css" href="./animate.css">
    	<style>
    		.fade-enter, .fade-leave-to{
    			opacity: 0;
    		}
    		.fade-enter-active, .fade-leave-active{
    			transition :opacity 3s;
    		}
    	</style>
    </head>
    <body>
    	<div id="root">
    		<!-- 被transition标签包裹的元素会有动画效果(自动会添加css样式以及删除),transition标签没有name属性则默认为样式名以v开头,若有如name是tran的则样式为tran-enter,tran-enter-active -->
    		<!-- 第一次页面载入也有动画效果只要加appear属性就行了 -->
    		<transition name="fade"
    		appear
    		enter-active-class="animated swing fade-enter-active"
    		leave-active-class="animated shake fade-leave-active"
    		appear-active-class="animated swing"
    		>
    		<div v-if="show">hello world</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>

    若过渡效果跟动画时长不一致,可以添加一个type属性如

    <transition
    		type="transition" 
    		name="fade"
    		appear
    		enter-active-class="animated swing fade-enter-active"
    		leave-active-class="animated shake fade-leave-active"
    		appear-active-class="animated swing"
    		>

    这样即可已上面的transition定义的时间来做规范了

    引用Velocity.js

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    	<script src="./Velocity.js"></script>
    </head>
    <body>
    	<div id="root">
    		<!-- 被transition标签包裹的元素会有动画效果(自动会添加css样式以及删除),transition标签没有name属性则默认为样式名以v开头,若有如name是tran的则样式为tran-enter,tran-enter-active -->
    		<!-- 第一次页面载入也有动画效果只要加appear属性就行了 -->
    		<transition
    		name="fade"
    		@before-enter="handleBeforeEnter"
    		@enter="handleEnter"
    		@after-enter="handleAfterEnter"
    		>
    		<div v-if="show">hello world</div>
    		</transition>
    		<button @click="handleClick">切换</button>
    	</div>
    	<script>
    		var vm=new Vue({
    			el:"#root",
    			data:{
    				show:true
    			},
    			methods:{
    				handleClick:function(){
    					this.show=!this.show;
    				},
    				/*vue内js的钩子函数*/
    				handleBeforeEnter:function(el){
    					el.style.opacity=0;
    				},
    				handleEnter:function(el,done){
    					/*el是对应绑定的元素*/
    					Velocity(el,{opacity:1},{duration:1000,complete:done});
    					/*done是类似与filter内的dofilter方法*/
    					
    				},
    				handleAfterEnter:function(el){
    					console.log("动画结束");
    				}
    			}
    		})
    	</script>
    </body>
    </html>

    多个组件中动态效果过渡

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    	<style type="text/css">
    		/* 这是vue中自动绑定的css样式引用 */
    		.v-enter,.v-leave-to{
    			opacity: 0;
    		}
    		.v-enter-active,.v-leave-active{
    			transition:opacity 1s;
    		}
    	</style>
    </head>
    <body>
    	<div id="root">
    		<!-- mode="out-in"是代表元素显示顺序为先出后进 -->
    		<transition mode="out-in">
    			<component :is="type"></component>
    		</transition>
    		<button @click="handleClick">toggle</button>
    	</div>
    	<script>
    		//vue动态组件
    		Vue.component('child',{
    			template:"<div>child</div>"
    		})
    		Vue.component('child-one',{
    			template:"<div>child-one</div>"
    		})
    		var vm=new Vue({
    			el:"#root",
    			data:{
    				type:'child'
    			},
    			methods:{
    				handleClick:function(){
    					this.type = this.type === 'child' ? 'child-one' : 'child'
    				}
    			}
    		})
    	</script>
    </body>
    </html>

    Vue中列表的过渡效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Vue中列表的过渡效果</title>
    	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    	<style type="text/css">
    		/* 这是vue中自动绑定的css样式引用 */
    		.v-enter,.v-leave-to{
    			opacity: 0;
    		}
    		.v-enter-active,.v-leave-active{
    			transition:opacity 1s;
    		}
    	</style>
    </head>
    <body>
    	<div id="root">
    		<!-- mode="out-in"是代表元素显示顺序为先出后进 -->
    		<transition-group>
    			<div v-for="item of list" :key="item.id">
    				{{item.title}}
    			</div>
    		</transition-group>
    		<button @click="handleClick">add</button>
    	</div>
    	<script>
    		var count=0;
    		var vm=new Vue({
    			el:"#root",
    			data:{
    				list:[]
    			},
    			methods:{
    				handleClick:function(){
    					this.list.push({
    						id:count++,
    						title:"hello World"
    					})
    				}
    			}
    		})
    	</script>
    </body>
    </html>

     

    展开全文
  • 主要介绍了Vue 过渡(动画)transition组件案例详解,非常不错,具有参考借鉴价值,需要的朋友参考下
  • vue 动画效果会闪动

    千次阅读 2018-08-07 09:13:09
    今天在写vue路由切换动画动画执行总会先闪一下,代码如下: 后来多方查找原因,才发现是 transition标签少加了一个属性 mode="out-in" 加上后完美解决!!! 上边的代码设置了改变透明度的动画...

    今天在写vue路由切换动画时 动画执行总会先闪一下,代码如下:

    后来多方查找原因,才发现是 transition标签少加了一个属性 mode="out-in" 加上后完美解决!!!

    上边的代码设置了改变透明度的动画过渡效果,但是默认的mode模式in-out模式,这并不是我想要的。mode模式。

    过渡模式mode:

    • in-out:新元素先进入过渡,完成之后当前元素过渡离开。
    • out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。
    展开全文
  • 主要为大家详细介绍了vue实现页面加载动画效果vue页面出现正在加载的初始页面与实现动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 有时使用动画时,动画可能动都不动 这时添加 el.offsetHeight或许可以解决问题 <div id="app"> <input type="button" value="加入到购物车" @click='flag=!flag'> <transition @before-enter='...

    有时使用动画时,动画可能动都不动 这时添加 el.offsetHeight或许可以解决问题

    <div id="app">
        <input type="button" value="加入到购物车" @click='flag=!flag'>
        <transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEtner'>
            <div id="ball" v-show='flag'></div>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                beforeEnter(el) {
                    el.style.transform = 'translate(0,0)  scale(1)'
                },
                enter(el, done) {
                    console.log(done)
                    // el.offsetWidth
                    // 为了能让代码正常进行,在设置了结束状态后必须调用一下这个元素的
                    // offsetHeight / offsetWeight  只是为了让动画执行
                    el.offsetHeight
                    el.style.transform = 'translate(300px,500px) scale(0)';
                    el.style.transition = 'all 3s'
                    // console.log(el.offsetWidth);
                    // 让动画继续往下执行
                    done()
                },
                afterEtner(el) {
                    this.flag = !this.flag;
                }
            },
        });
    </script>
    
    展开全文
  • 主要介绍了vue元素实现动画过渡效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了vue中怎样实现弹出层动画效果,由上而下渐渐显示,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
  • Vue动画效果fade原理

    2019-04-19 16:52:38
    由显示到隐藏的过程: 由隐藏到显示的过程:

    由显示到隐藏的过程:
    在这里插入图片描述
    由隐藏到显示的过程:
    在这里插入图片描述

    展开全文
  • 文件分为 3个 放置文件 说明 文件 和图片 PageTransition.vue 放在文件包里 在路由里面 引入 然后其它路径 都为 改路径的子路径 ,不会引入可以看文档,或图片
  • vue中添加动画效果

    千次阅读 2019-12-11 17:23:51
    最近在写一些小demo,在做移动端的页面,点击按钮跳转页面进行动画效果,发现一个最简单的方法 Animate.css是一款不错的框架 使用方法也很简单 查看Animate.css文档在githup上进行下载安装css npm install animate....
  • 现如今移动端APP对用户体验方面的要求越来越高了,最近致力于用户体验优化,因为需要实现类似APP页面切换的动画效果,百度google搜索资料不是很全,所以自己写文档,在实现效果的基础上,顺便恶补一波VueRouter及CSS...
  • 主要为大家详细介绍了vue.js实现回到顶部动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本篇文章主要介绍了vue实现app页面切换动画效果实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 移动端页面载入时过长的白屏等待,总是让人心烦气躁 ...以上这篇vue实现设置载入动画和初始化页面动画效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 在使用Vue.js开发移动端页面的时候,默认的组件转场效果过于生硬,根本就没有动画效果。于是我用Vue提供的组件过渡功能,写了个仿微信app页面跳转的动画,以提高用户体验。 废话不多说,直接上图 在600元骁龙632...
  • 主要介绍了vue.js 实现点击展开收起动画效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 折叠效果动画

    千次阅读 2019-09-01 11:23:02
    vue 中应用css动画,详见文档:https://cn.vuejs.org/v2/guide/transitions.html,此处只列出css设置,方便后来者使用。 .collapse-leave, .collapse-enter-active { max-height: 100000rem; // 由于折叠面板...
  • vue中实现动画效果--三种方式

    千次阅读 2020-06-12 20:14:56
    一、普通动画实现 效果 用一个按钮, 控制一个 div 的淡入和淡出 步骤 使用 js 控制 div 的 class name 点击 function anime() { var boxDom = document.querySelector('#box'); if (boxDom.className == "show") ...
  • Vue动画效果问题

    千次阅读 2018-09-19 10:49:16
     1、点击列表中分页的时候,不管加载第几页的数据,翻转动画效果都不执行  2、点击卡片操作的时候,当前卡片的翻转效果消失了,其他改变的样式都是好的  3、单独点击卡片效果的显示了,然后再单击分页时,那个...
  • 前段时间做了一个移动端spa项目,技术基于 :vue + vue-router + vuex + mint-ui 因为使用了vue-cli脚手架的webpack...(类似翻书翻到下一页的效果)  2. 从当前二级页面跳回一级页面需要展示的转场动画是二级页面向屏幕
  • 主要介绍了详解Vue中过度动画效果应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue中 有三种动画的实现方式 分别是: 使用过渡类名实现 使用第三方animate.css实现 使用钩子函数实现 下面将一一介绍: 1、使用过渡类名实现 首先 来了解一下动画的过渡类名: ( 这是我在Vue官网找到的一个示意...
  • 本篇文章主要介绍了Vue2路由动画效果的实现代码,可以根据不同的路径去改变动画的效果,有兴趣的可以了解一下

空空如也

空空如也

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

vue的动画效果

vue 订阅