VUE之多元素组件过渡+动画封装

（1）多元素过渡
（2）多组件过渡
（3）列表过渡
（4）动画封装

多元素过渡

首先介绍下如何实现多元素过渡
（1）利用条件编译指令v-if与v-else实现多元素内容切换.
（2）接下来在内容切换基础上，添加过渡动画，例如渐隐渐现效果
1、transition添加name属性命名
2、设置过渡状态
（3）状态管理
测试后发现并没有过渡效果，分析原因Vue在多个元素切换过程中会尽量复用DOM，如果不加key，那么vue会选择复用节点(Vue的就地更新策略)，导致之前节点的状态被保留下来，由此产生一系列的bug.。
方案：给多元素添加不同key进行状态管理，代码如下
多元素过渡-案例练习
多元素过渡可以通过v-if条件指令进行控制
点击验证后发现，在过渡过程中area区域被重绘了，一个离开过渡的时候另一个开始进入过渡。
这是 <transition> 的默认行为 - 即进入和离开同时发生。
方案：在元素绝对定位时候运行正常：
也可以给元素加上转换属性，实现滑动过渡的效果

多元素过渡-过渡模式

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了两种过渡模式。
①in-out：新元素先进行过渡，完成之后当前元素过渡离开（不是经常用到，但对于一些稍微不同的过渡效果还是有用的）
②out-in：当前元素先进行过渡，完成之后新元素过渡进入

多组件过渡

接下来介绍下多组件实现过渡效果，代码如下，直接将多元素修改为多组件即可
多组件过渡也可以结合动态组件进行操作，首先写个基础动态组件案例，如下所示
接下来添加transition过渡

列表过渡

目前为止，仅仅实现了单个&&多个元素、单个&&多个组件的过渡动画，接下来介绍下针对列表增删时做的一些过渡动画操作。
（1）首先将基础架构搭建好，要求点击按钮时添加新内容到列表尾部
（2）目前为止已经实现点击添加效果，如下所示
之前的一些过渡动画效果都是针对单个元素组件的隐藏展示，或者多个元素组件来回切换的动画效果，接下来介绍下列表过渡效果，即列表增删改动数据时的过渡动画。
列表过渡动画标签<transition-group></transition-group>
（1）对于列表过渡需要用到列表过渡标签transition-group
（2）定义CSS过渡效果
此时再次点击便实现了列表过渡切换效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue多元素组件过渡+动画封装</title><script src="js/vue-2.6.9.min.js"></script><style type="text/css">.demo {width: 200px;height: 200px;background: red;}.demo1 {width: 200px;height: 200px;background: green;}.fade-enter,.fade-leave-to {opacity: 0;}.fade-enter-active,.fade-leave-active {transition: opacity 2s;}.fade-enter-to,.fade-leave {opacity: 1;}</style></head><body><div id="root"><transition name="fade" mode="out-in"><div class="demo" v-if="status" key="one"></div><div class="demo1" v-else key="two"></div></transition><button @click="handleClick">toggle</button></div><script type="text/javascript">var root = new Vue({el: '#root',data: {status: true},methods: {handleClick() {this.status = !this.status;}}})</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue多元素组件过渡</title><script src="js/velocity.js"></script><script src="js/vue-2.6.9.min.js"></script><style type="text/css">/* .demo {width: 200px;height: 200px;background: red;}.demo1{width: 200px;height: 200px;background: green;} */.addTransition-enter,.addTransition-leave-to {opacity: 0;}.addTransition-enter-active,.addTransition-leave-active {transition: opacity 2s;}.addTransition-enter-to,.addTransition-leave {opacity: 1;}</style></head><body><div id="root"><transition-group name="addTransition"><div v-for="list of lists" :key="list.age">姓名:{{list.name}}-----年龄:{{list.age}}</div></transition-group><button @click="handleClick">add</button></div></body><script type="text/javascript">var age = 0;var root = new Vue({el: '#root',data: {lists: [{name: '二狗子',age: 20}]},methods: {handleClick() {this.lists.push({name: '新同学',age: age++})}}})</script>
</html>

动画封装

前言
如果部分效果在页面里应用较多，可以对其进行动画封装，以方便日后调用
步骤：
（1）首先创建基础动画，即简单的显隐切换动画，如下所示
（2）封装动画组件
这里使用了props传值&&slot插槽
3）调用组件
组件内部为了响应slot插槽，所以需要填入对应DOM元素，同时传入参数
目前为止已经实现了对动画的封装，可以任意次调用，如下所示
（4）改良版—JS动画
动画的封装不仅可以使用CSS实现，同时也可以借助动画钩子，使用JS实现动画效果。
即将如下的CSS动画代码也封装到组件里

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>动画封装</title><script src="js/vue-2.6.9.min.js"></script><style type="text/css">.demo {width: 200px;height: 200px;background: red;}.demo1 {width: 200px;height: 200px;background: green;}.fade-enter,.fade-leave-to {opacity: 0;}.fade-enter-active,.fade-leave-active {transition: opacity 2s;}.fade-enter-to,.fade-leave {opacity: 1;}</style></head><body><div id="root"><fade :status="status"><div class="demo">我是展示内容1</div></fade><fade :status="status"><div class="demo1">我是展示内容2</div></fade><button @click="handleClick">toggle</button></div><script type="text/javascript">Vue.component('fade', {props: {status: Boolean},template: `<transition name="fade" model="out-in"><slot v-if="status"></slot></transition>`})var root = new Vue({el: '#root',data: {status: true},methods: {handleClick() {this.status = !this.status;}}})</script></body>
</html>

以上就是Vue多元素过渡以及动画封装，如有问题请联系小编！

VUE之多元素组件过渡+动画封装相关推荐

vue element Pagination分页组件二次封装
vue+element 的分页组件封装 1.在components中创建GlobalPagination文件夹,代码如下 <template><div :class="{' ...
【记】Vue - 拖拽元素组件实现
需求描述: 1.可实现PC/移动端元素拖拽移动 2.支持2种模式:1.元素跟随光标点放置2.元素在光标点平齐位置靠侧边吸附市面上估计有很多这种组件和功能了,但我没找到合适的,用了VueUse的use ...
vue-transition过渡动画
如何给Vue控制的元素添加过渡动画 vue-transitions 1.1 将需要执行动画的元素放到transition组件中 1.2 当transition组件中的元素显示时会自动查找.v-ente ...
【猿说VUE】Vue效果法宝，过渡动画
基础:过渡动画 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Anim ...
vue移动端过渡动画_Vue.js实现微信过渡动画左右切换效果
前言需要用到的技术栈:Vue+Vuex 先看看效果图过渡动画示例代码 router.beforeEach(function (to,from,next) { const toIndex = hi ...
Fabric.js 删除元素（带过渡动画）
本文简介 Fabric.js 提供了2个方法删除对象. 一个是直接删除,另一个方法是带过渡动画删除元素(淡出动画). 本文重点讲带过渡动画删除元素的方法,还会讲到设置过渡时长 .删除后的 ...
vue如何使用原生js写动画效果_深入理解 Vuejs 动画效果
本文主要归纳在 Vuejs 学习过程中对于 Vuejs 动画效果的各个相关要点.由于本人水平有限,如文中出现错误请多多包涵并指正,感谢.如果需要看更清晰的代码高亮,请跳转至我的个人站点的 Vue 中的 ...
vue如何使用原生js写动画效果_Vue中的动画效果
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...
HTML背景图片动画设置,CSS 背景图加载完成后的过渡动画
直接给背景图设置动画效果会出现图片因加载过慢而显示效果不佳的情况,可以通过 JavaScript 来获取图片的加载状态. 下面来实现一个背景图片透明度渐变的效果. 首先来设置要添加背景动画的元素样式 ...
vue 组件封装 | s-fullpage 全屏滚动（内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）
目录目标实现原理(要点) 完整代码 s-fullpage 和 s-fullpageItem s-fullpage.vue s-fullpageItem.vue 使用范例范例效果目标实现类似插 ...

VUE之多元素组件过渡+动画封装

多元素过渡

多元素过渡-过渡模式

多组件过渡

列表过渡

动画封装

VUE之多元素组件过渡+动画封装相关推荐

最新文章

热门文章