使用vue的transition完成滑动过渡的示例代码


Posted in Javascript onJune 25, 2018

使用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可以正常运动,不过这种方式只能先后完成动画,不能同时完成动画。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
JS 基本概念详细介绍
Oct 16 Javascript
JS实现仿微信支付弹窗功能
Jun 25 #Javascript
vue.js 实现输入框动态添加功能
Jun 25 #Javascript
vue-router重定向不刷新问题的解决
Jun 25 #Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 #Javascript
详解React之父子组件传递和其它一些要点
Jun 25 #Javascript
Vue EventBus自定义组件事件传递
Jun 25 #Javascript
一个Vue页面的内存泄露分析详解
Jun 25 #Javascript
You might like
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
python uuid模块使用实例
2015/04/08 Python
Python sys.argv用法实例
2015/05/28 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
python 字典访问的三种方法小结
2019/12/05 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
python 如何引入协程和原理分析
2020/11/30 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
医院护士专业个人的求职信
2013/12/09 职场文书
民族团结先进个人材料
2014/02/05 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
化学教育专业自荐信
2014/07/04 职场文书
八项规定对照检查材料
2014/08/31 职场文书
刑事代理授权委托书
2014/09/17 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
2014年维稳工作总结
2014/11/18 职场文书
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
Redis入门基础常用操作命令整理
2022/06/01 Redis