这是我用js和css3，实现的vue transition组件相同的效果
核心js

 var btn = document.getElementById('btn');

  var box = null

  btn.addEventListener('click', function() {

    if (box) return

    box = document.createElement('div')

    box.innerText = 'box'

    box.classList = 'box v-enter v-enter-active'

    document.body.appendChild(box)

    // 必须用setTimeout

    setTimeout(() => {

      box.classList.remove('v-enter')

    })

    box.addEventListener("webkitTransitionEnd", function() {

      if (!box) return

      if (box.classList.contains('v-leave-active')) {

        box.parentNode.removeChild(box)

        box = null

      }else {

        box.classList.remove('v-enter-active')

      }

      console.log("动画结束");

    })

  }, false)

  var leaveBtn = document.getElementById('leaveBtn');

  leaveBtn.addEventListener('click', function() {

    if (!box)return

    box.classList.add('v-leave-to', 'v-leave-active')

  },false)

全部代码

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport"

        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    *{

      padding:0;margin:0;

      box-sizing:border-box;

    }

    .box{

      width:100px;

      height:100px;

      border: 1px solid red;

      margin: 0 auto;

    }

    .v-enter{

      opacity: 0;

      transform: translate3d(-100px, 0, 0)

    }

    .v-enter-active{

      transition: all .8s;

    }

    .v-leave-to{

      opacity: 0;

      transform: translate3d(-100px, 0, 0)

    }

    .v-leave-active{

      transition: all .8s;

    }

    .page{

      position: absolute;

      left:0;

      top:0;

      bottom:0;

      right:0;

    }

  </style>

</head>

<body>

  <div style="text-align:center; margin: 30px;">

    <button id="btn">进入</button>

    <button id="leaveBtn">离开</button>

  </div>

  <script type="text/javascript">

  var btn = document.getElementById('btn');

  var box = null

  btn.addEventListener('click', function() {

    if (box) return

    box = document.createElement('div')

    box.innerText = 'box'

    box.classList = 'box v-enter v-enter-active'

    document.body.appendChild(box)

    // 必须用setTimeout

    setTimeout(() => {

      box.classList.remove('v-enter')

    })

    box.addEventListener("webkitTransitionEnd", function() {

      if (!box) return

      if (box.classList.contains('v-leave-active')) {

        box.parentNode.removeChild(box)

        box = null

      }else {

        box.classList.remove('v-enter-active')

      }

      console.log("动画结束");

    })

  }, false)

  var leaveBtn = document.getElementById('leaveBtn');

  leaveBtn.addEventListener('click', function() {

    if (!box)return

    box.classList.add('v-leave-to', 'v-leave-active')

  },false)

  </script>

</body>

</html>

vue transtion 实现分析的更多相关文章

  1. 前端Vue 源码分析-逻辑层

    Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...

  2. [Vue源码分析] v-model实现原理

    最近小组有个关于vue源码分析的分享会,提前准备一下… 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么 ...

  3. Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...

  4. Vue源码分析(一) : new Vue() 做了什么

    Vue源码分析(一) : new Vue() 做了什么 author: @TiffanysBear 在了解new Vue做了什么之前,我们先对Vue源码做一些基础的了解,如果你已经对基础的源码目录设计 ...

  5. Vue中computed分析

    Vue中computed分析 在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...

  6. vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...

  7. vue源码分析—Vue.js 源码目录设计

    Vue.js 的源码都在 src 目录下,其目录结构如下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── ser ...

  8. vue工作原理分析

    初始化 在 new Vue() 时会调⽤用_init()进⾏行行初始化,会初始化各种实例例⽅方法.全局⽅方法.执⾏行行⼀一些⽣生命周期. 初始化props. data等状态.其中最重要的是data的「 ...

  9. vue源码分析—Vue.js 源码构建

    Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下.(Rollup 中文网和英文网) 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.j ...

随机推荐

  1. 将蓝牙rssi(信号强度)转换成距离

    遇到一个问题,是将蓝牙rssi(信号强度)转换成距离的问题. 这一问题没有准确的解决办法,但是有人做过一个拟合回归函数,其变化规律比较类似于rssi的变化规律,函数如下: d = ^(abs(rssi ...

  2. python中requests.session的妙用

    在进行接口测试的时候,我们会调用多个接口发出多个请求,在这些请求中有时候需要保持一些共用的数据,例如cookies信息. 1.requests库的session对象能够帮我们跨请求保持某些参数,也会在 ...

  3. 记一次ceph集群的严重故障 (转)

    问题:集群状态,坏了一个盘,pg状态好像有点问题[root@ceph-1 ~]# ceph -s    cluster 72f44b06-b8d3-44cc-bb8b-2048f5b4acfe     ...

  4. 在Spring中配置jdbc为什么不能用${username}问题

    楼主在spring中配置jdbc时,引用的是dbcp.jar包,在dataSource.properties配置文件中,有mysql用户名,楼主自然的选择了使用username,密码是root, 然后 ...

  5. AC自动机--summer-work之我连模板题都做不出

    这章对现在的我来说有点难,要是不写点东西,三天后怕是就一无所有了. 但写这个没有营养的blog的目的真的不是做题或提升,只是学习学习代码和理解一些概念. 现在对AC自动机的理解还十分浅薄,这里先贴上目 ...

  6. 7. grep

    grep命令 grep grep是通用正则表达式分析程序(General Regular Expression Parser)的缩写. grep命令可以在它的输入中搜索指定的字符串模式(Pattern ...

  7. robotframework 接口测试 +RSA 加密

    首先,实现RSA加密,需要用到pycrypto这个库,这个库又依赖openssl,所以需要先下载openssl,具体教程可以参考http://bbs.csdn.net/topics/392193545 ...

  8. vue data中的对象的属性如何使用watch监听

    在写项目的时候遇到了一个问题,就是需要动态监听data中一个对象的属性的变化.遇到了许多坑,在此过程中也发现了两种解决方案. 一.通过deep属性实现 data() { return { parent ...

  9. windows端口映射

    1. 查看netsh interface portproxy show all 2. 添加端口映射转发netsh interface portproxy add v4tov4 listenaddres ...

  10. CodeForces 1251B --- Binary Palindromes

    [CodeForces 1251B --- Binary Palindromes] Description A palindrome is a string t which reads the sam ...