一、过渡动画

在组件的插入、移除、更新时可以附带转场效果，即使用过渡动画。

二、transition组件

在vue中内置了transition组件,可以用它来包装要展示过渡动画的的组件，在transition组件的name属性指定要执行的动画的名称，vue约定了一系列CSS类名来定义各个过渡过程中组件的状态。

<transition name=“动画名称”>
组件
</transition>

三、transition的显示的CSS类名

动画名-enter-from ：表示动画开始

动画名称-enter-active：整个运动状态

动画名称-enter-to：结束状态

四、transition的隐藏的CSS类名

动画名-leave-from：离开时的状态

动画名-leave-active：离开过渡生效时的状态

动画名-leave-to：离开的结束状态

五、互斥动画

是多个组件的过渡动画。即当一个元素显示时,其他元素隐藏。

示例：

test.vue代码段：

<template><h2>动画测试</h2><button @click="myClick">显示/隐藏</button><transition name="ani"><div v-if="show" class="demo"></div><div v-else class="demo2"></div></transition>
</template><script>export default {name: "Test",data(){return {show : false}},methods:{myClick(){this.show = !this.show}}
}
</script><style scoped>
.demo{width: 100px;height: 100px;background-color: blue;
}.demo2{width: 100px;height: 100px;background-color: red;
}
.ani-enter-from {width: 0px;height: 0px;background-color: red;
}
.ani-enter-active{transition: width 2s , height 2s, background-color 2s;
}
.ani-enter-to{width: 100px;height: 100px;background-color: blue;
}.ani-leave-from{width: 100px;height: 100px;background-color: blue;
}
.ani-leave-active{transition: width 2s , height 2s, background-color 3s;
}
.ani-leave-to{idth: 0px;height: 0px;background-color: red;
}
</style>

App.vue代码段：

import Test from "./components/Test.vue";
<template>
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
<Test/>
</template>

六、设置动画过程中的监听回调

表示在组件的加载或卸载过程中，有一系列的生命周期函数被调用。
@before-enter=“beforeEnter”
@enter=“enter”
@after-enter=“afterEnter”
@before-leave=“beforeLeave”
@leave=“Leave”
@after-leave=“afterLeave”

One.vue代码段：

<template>
<button @click="myClick">显示/隐藏</button><transition name="ani"@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"@before-leave="beforeLeave"@leave="Leave"@after-leave="afterLeave"><div v-if="show" class="demo"></div></transition>
</template><script>
export default {name: "One",data(){return{show:false}},methods:{myClick(){this.show = !this.show},beforeEnter(){console.log('beforeEnter')},enter(el,done){console.log('动画开始'+el)console.log(done)},afterEnter(el){console.log('afterEnter')},beforeLeave(el){console.log('beforeLeave')},Leave(el){console.log('leave')},afterLeave(){console.log('afterLeave')}}
}
</script><style scoped>
.demo{width:100px;height: 100px;background-color: blue;margin-bottom: 10px;
}.ani-enter-from{width:0px;height:0px;background-color: red;
}
.ani-enter-active{transition:width 2s ,height 2s,background-color 2s;
}
.ani-enter-to{width:100px;height: 100px;background-color: blue;
}.ani-leave-from{width: 100px;height: 100px;background-color: blue;
}
.ani-leave-active{transition: width 2s , height 2s, background-color 3s;
}
.ani-leave-to{idth: 0px;height: 0px;background-color: red;
}
</style>

App.vue代码段：

import One from "./components/One.vue"
<template><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /><One/>
</template>

七、列表过渡动画

使用来实现列表元素的动画效果

注意：若使用列表动画,列表中的每个元素(列表项)必须要有一个唯一的key值

ListDemo.vue代码段：

<template><button @click="myClick">添加元素</button><button @click="delClick">删除元素</button><transition-group name="list"><div v-for="(item,index) in items" :key="index">元素：{{ item }}</div></transition-group>
</template><script>
export default {name: "ListDemo",data(){return {items: [1,2,3,4,5]}},methods:{myClick(){this.items.push(this.items[this.items.length-1]+1)},delClick(){if (this.items.length > 0){this.items.pop()}}}
}
</script><style scoped>
.list-enter-active,
.list-leave-active {transition: all 1s ease;
}
.list-enter-from,
.list-leave-to{opacity: 0;
}
</style>

App.vue代码段：

import ListDemo from "./components/ListDemo.vue";
<template><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /><ListDemo/>
</template>

【Vue】Vue的过渡动画相关推荐

vue移动端过渡动画_Vue.js实现微信过渡动画左右切换效果
前言需要用到的技术栈:Vue+Vuex 先看看效果图过渡动画示例代码 router.beforeEach(function (to,from,next) { const toIndex = hi ...
Vue中实现过渡动画
文章目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画 ...
Vue全家桶（一）：Vue基础+Vue-Cli+Vue组件化+过渡动画
目录 1.Vue概述 1.1 认识Vue 1.2 Vue的两核心 1.3 Vue的初体验 1.4 Vue的生命周期 2. Vue-CLI (Command Line Interface) 3. Vue ...
vue移动端过渡动画_Vue仿微信app页面跳转动画效果
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
Vue | Vue.js 实现过渡动画
vue图片动画上下跳动_Vue 解决路由过渡动画抖动问题(实例详解)
前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
Vue中的基础过渡动画原理解析
前言在日常开发中动画是必不可少的一部分不仅能让元素直接的切换显得更加自然同时也能极大的增强用户体验因此在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡 ...
Vue 路由知识三(过渡动画及路由钩子函数)
路由的过渡动画:让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性. <transition nam ...
hide show vue 动画_Vue2.x学习四：过渡动画
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 请注意它的应用场景并不是说我们写了一个动画之后让它一直在动,而是在一个模块显示或隐藏的时候去做一种特效,使得它的过程有过渡 ...

【Vue】Vue的过渡动画

一、过渡动画

二、transition组件

三、transition的显示的CSS类名

四、transition的隐藏的CSS类名

五、互斥动画

示例：

六、设置动画过程中的监听回调

七、列表过渡动画

【Vue】Vue的过渡动画相关推荐

最新文章

热门文章