这是我用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. 记录学习Linux过程

    第一步fdisk-l 出错 Permission denied? ubuntu@VM-0-6-ubuntu:~$ fdisk -l fdisk: cannot open /dev/vda: Permi ...

  2. C memcpy()用法

    https://blog.csdn.net/qq_21792169/article/details/50561570

  3. SCM是什么?

    答: 全称为Software Configuration Management,即为软件配置管理

  4. BCNF/3NF的判断方法

    判断是否是 3NF 的条件: 对于 R 上的每个函数依赖 X->A (X 是关系 R 属性的一个子集,A 是 R 的一个属性) ,以下条件中的一个成立:1 X ∈ A2 X 是超码3 A 是 R ...

  5. Arrays.asList()使用指南

    简介 Arrays.asList()在平时开发中还是比较常见的,我们可以使用它将一个数组转换为一个List集合. String[] myArray = { "Apple", &qu ...

  6. Delphi 字符串加密与解密函数

    EncdDecd 单元: EncodeString.DecodeString.EncodeBase64.DecodeBase64 uses EncdDecd; const str = '万一的 Del ...

  7. Mac下配置多个SSH Keys

    Mac下配置多个SSH Keys 生成SSH key # Creates a new ssh key using the provided email # 默认生成的文件名为id_rsa,可以根据命令 ...

  8. Pulse Secure 任意文件读取（CVE-2019-11510）漏洞

    漏洞分析 我们可以通过CVE-2019-11510这个未授权的任意文件读取漏洞把以下文件下载回来. /etc/passwd /etc/hosts /data/runtime/mtmp/system / ...

  9. Linux用户管理命令介绍

    1)管理用户命令总汇 2)管理用户组命令 总汇

  10. DOS ftp

    C:\>ftp /? 将文件传送到运行 FTP 服务器服务(经常称为后台程序)的计算机以及将文件从该计算机传出.可以交互使用 Ftp. FTP [-v] [-d] [-i] [-n] [-g] ...