这是我用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. 3.AOP中的IntroductionAdvisor

    上篇中的自定义Advisor是实现的AbstractPointcutAdvisor,Advisor其实还有一个接口级别的IntroductionAdvisor                     ...

  2. git 命令简洁手册

    1.从当前目录初始化 git init 2.对文件进行跟踪 或  将已跟踪的文件放到暂缓区 或 把有冲突的文件标记为已解决状态 git add <file> 3.从现有仓库克隆 git c ...

  3. 异步IO和协程

    1-1.并行:真的多任务执行(CPU核数>=任务数):即在某个时刻点上,有多个程序同时运行在多个CPU上 1-2.并发:假的多任务执行(CPU核数<任务数):即一段时间内,有多个程序在同一 ...

  4. [Mac]安装pyspider的大坑

    1.切记这是一个大坑. 2.我在用mac电脑安装pyspider的时候,原以为pip install pyspider 就万事大吉,合家欢乐了,but the question 比较多. 第一个问题: ...

  5. PHP上传超大文件解决方案

    一提到大文件上传,首先想到的是啥??? 没错,就是修改php.ini文件里的上传限制,那就是upload_max_filesize.修改成合适参数我们就可以进行愉快的上传文件了.当然啦,这是一般情况下 ...

  6. Linux日常用的命令

    查看一个文件夹是的挂载路径,比如查看opt文件夹挂载在哪:df /opt root@iZ2zedo02x7n4nuc3lb4ueZ:~# df /opt Filesystem 1K-blocks Us ...

  7. mysql安装报错error: Header V3 DSA signature: BAD, key ID

    CentOS安装rpm安装MySQL时爆出警告: warning: mysql-community-server-5.7.18-1.el6.x86_64.rpm: Header V3 DSA/SHA1 ...

  8. 购物车实现 <Block实现回调>

    效果图如下: 具体代码实现如下: Model: #import <Foundation/Foundation.h> @interface ShopCarModel : NSObject @ ...

  9. 封装Button ,封装UITableView,封装UICollectionView

    ---恢复内容开始--- 封装Button ,封装UITableView,封装UICollectionView: 1.实现Button的创建和点击事件不用分开操作处理; 2.实现UITableView ...

  10. js如何控制select展开

    找了一圈也没找到靠谱的方案,后来通过动态的控制select的size属性实现了. 这也算是一种方法吧. 先判断option的数量n,然后把select的size调整到n,当用户选择后,再把size设置 ...