使用vue的transition完成滑动过渡

使用vue来做一些小巧的动画效果是非常方便的，今天本人想使用vue的transition来完成一个滑动过渡效果，这里和大家分享一下。

直接上源代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue滑动效果</title><style>.d {position: absolute;border: 1px solid red;width: 30px;height: 30px;}@keyframes show {0% {opacity: 0;left: 32px;}100% {opacity: 1;left: 0;}}@keyframes hide {0% {opacity: 1;left: 0;}100% {opacity: 0;left: -32px;}}.show-enter-active {animation: show 1.2s;}.show-leave-active {animation: hide 1.2s;}.show-enter, .show-leave-to {opacity: 0;}.wrap {position: relative;width: 32px;height: 32px;}</style><script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p>{{ message }}</p><div class="wrap"><transition name="show"><div class="d" v-for="item in list" :key="item.id" v-if="count === item.id">{{ item.text }}</div></transition></div><button @click="add">add</button>
</div><script>new Vue({el: '#app',data () {return {message: 'Hello Vue.js!',count: 0,list: [{id: 0, text: 'aaa'},{id: 1, text: 'bbb'},{id: 2, text: 'ccc'}]}},methods: {add: function () {if (this.count < this.list.length - 1) {this.count += 1;} else {this.count = 0;}}}})
</script>
</body>
</html>
复制代码

这里需要注意的是父级使用relative，子级使用absolute进行定位，利用left值来进行位置的控制移动。这里如果使用transform的话，由于之前的div有一个渐变的消失过程，这个过程中他的位置一直有存在，造成了后面的div无法正确移动到对应位置，所以使用absolute更好。实在不行可以使用transition的mode属性，设置成out-in，先让前者完成动画，让占据的位置完全消失，使得下一个div可以正常运动，不过这种方式只能先后完成动画，不能同时完成动画。

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

使用vue的transition完成滑动过渡相关推荐

vue 组件封装 | s-fullpage 全屏滚动（内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）
目录目标实现原理(要点) 完整代码 s-fullpage 和 s-fullpageItem s-fullpage.vue s-fullpageItem.vue 使用范例范例效果目标实现类似插 ...
【Vue】transition让你的v-if和v-show有个美美的过渡与动画
[Vue]transition让你的v-if和v-show有个美美的过渡与动画博客说明文章所涉及的部分资料来自互联网整理,当然还有自己个人的总结和看法,分享的目的在于共建社区和巩固自己.引用的资料 ...
vue中transition动画（移动端页面切换左右滑动效果）
例子一:(简单进入和离开动画) demo1 <template><div><button @click="isShow = !isShow">显 ...
Vue.js 进入/离开列表过渡
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate. ...
vue组件transition的使用（demo演示） - 教程篇
使用须知: 1. 简单介绍<transition> name ( - string ),用于自动生成 CSS 过渡类名. 例如: name: 'fade' 将自动拓展为.fade-ente ...
10.Vue.js前端框架：过渡
1.过渡的作用 Vue.js 内置了一套过渡系统,该系统是 Vue.js 为 DOM 动画效果提供的一个特性.在插入.更新或者移除 DOM 时可以触发 CSS 过渡和动画,从而产生过渡效果. 2.单元 ...
css3 updown 动画,Vue的transition中的slidedown,slideUp展开收起动画
vue transition动画 vue的transition过渡动画在vue官网已有详细教程,就不赘述了.然而当我们使用transition来实现slidedown,slideup的展开收起动画时, ...
[css] CSS3中的transition是否可以过渡opacity和display？
[css] CSS3中的transition是否可以过渡opacity和display? transition过渡display是有一个前提条件: 浏览器渲染是在每一帧的最后,每一帧都会执行以下操作: ...
VUE利用transition标签实现摇一摇抽签效果
VUE利用transition标签监听animation动画执行完毕,触发之后的操作 transition标签文档实现效果在线试一试欢迎各位大佬进群交流

使用vue的transition完成滑动过渡

使用vue的transition完成滑动过渡相关推荐

最新文章

热门文章