这是我用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. 指定pip清华源

    临时指定: pip install cefpython3 -i https://pypi.tuna.tsinghua.edu.cn/simple 一直使用:pip的配置文件为%HOME%/pip/pi ...

  2. C++ STL——set和multiset

    目录 一 set和multiset 二 对组pair 注:原创不易,转载请务必注明原作者和出处,感谢支持! 注:内容来自某培训课程,不一定完全正确! 一 set和multiset set和multis ...

  3. Microsoft 防跨站点脚本库AntiXSS Library

    AntiXSS 库目前处于版本 4.2.1,下载地址:http://www.microsoft.com/download/en/details.aspx?id=28589.它经历了一次非常棒的重新编写 ...

  4. ZooKeeper Lead选举

    前段时间学习了zookeeper,对其中比较难理解并且容易忘掉的知识点做一个记录~ 关键词: myId:表示在集群中,自身对应的id zxId:节点状态发生改变时,产生的一个时间戳,并且这个时间戳全局 ...

  5. SPRINGMVC 视图介绍

    SpringMVC视图解析器 前言 在前一篇博客中讲了SpringMVC的Controller控制器,在这篇博客中将接着介绍一下SpringMVC视图解析器.当我们对SpringMVC控制的资源发起请 ...

  6. Cell中实现多图展示

    实现的效果如下: 主要实现代码如下: // // DetailCell.m // Floral // // Created by 思 彭 on 16/9/21. // Copyright © 2016 ...

  7. CentOS里查看内存的使用

    转自 http://blog.csdn.net/blueman2012/article/details/6904597

  8. Spring Cloud(1)：概览

    什么是微服务? 小型的,简单的和解耦的服务 = 可伸缩的,有弹性的和灵活的应用程序. 什么是云? 基础设施即服务(Infrastructure as a Service, Iaas):云提供商只提供基 ...

  9. 配置nova服务使用ceph作为后端存储

    在ceph监视器上执行 1.创建pool池 为nova服务创建pool池(因为我只有一个OSD节点,所以要将副本数设置为1) ceph osd pool create nova-vms 32 ceph ...

  10. 无监督异常检测之LSTM组成的AE

    我本来就是处理时间序列异常检测的,之前用了全连接层以及CNN层组成的AE去拟合原始时间序列,发现效果不佳.当利用LSTM组成AE去拟合时间序列时发现,拟合的效果很好.但是,利用重构误差去做异常检测这条 ...