使用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 相关文章推荐
js 居中漂浮广告
Mar 21 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 Javascript
原生JS实现飞机大战小游戏
Jun 09 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
Smarty局部缓存的几种方法简介
2014/06/17 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
关于php开启错误提示的总结
2019/09/24 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
python获得一个月有多少天的方法
2015/06/04 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python聊天室实例程序分享
2016/01/05 Python
python基于ID3思想的决策树
2018/01/03 Python
Python向excel中写入数据的方法
2019/05/05 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
党员入党表决心的话
2014/03/11 职场文书
给学校的建议书范文
2014/05/15 职场文书
通信工程专业求职信
2014/06/04 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书