这是我用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. ZT：在mybatis的Mapping文件写入表名 出现异常ORA-00903: 表名无效 的解决

    简而言之,把#{tablename}换成${tablename}就能解决问题. 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:htt ...

  2. Vue + Webpack-simple 怎么修改生产环境下运行的端口？

    开发环境下运行 npm run dev,默认运行在localhost:8080端口,想要修改端口,于是在"dev“后增加了--port 8081

  3. Linux(CentOS / RHEL 7) 防火墙

    CentOS / RHEL 7 防火墙 Table of Contents 1. 简述 2. 常用基本操作 2.1. 查看防火墙状态 2.2. 开启防火墙 2.3. 关闭防火墙 2.4. 开机自动启动 ...

  4. Linux环境下warning: no newline at end of file

    今天在Windows下VS2012写了一个程序, 然后放在Linux系统下进行编译.Linux下使用的编译器是CC,结果,一编译出现了很多诸如下面的警告信息,似乎每一个.cpp和.h文件都有. Ite ...

  5. 【原创smarty仿淘宝商品图片轮播+放大镜效果】

    1.去掉图片集字段,字符串的多余字符 $goods_pic_display=$row[DISPLAY];$goods_pic_display1=str_replace('"', '', $g ...

  6. 计算机组成原理 — FPGA 现场可编程门阵列

    目录 文章目录 目录 FPGA FPGA 的应用场景 FPGA 的技术难点 FPGA 的工作原理 FPGA 的体系结构 FPGA 的开发 FPGA 的使用 FPGA 的优缺点 参考文档 FPGA FP ...

  7. 来聊聊JavaScript中的防抖和节流

    目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...

  8. 8-1 文本三级剑客之sed

    文本三级剑客之sed Stream EDitor, 行编辑器 sed是一种流编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(pattern ...

  9. PTA --- L1-002 打印沙漏

    题目地址 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号:各行符号中心对 ...

  10. pandas中groupby的参数：as_index

    参考:https://blog.csdn.net/cjsyr6wt/article/details/78200444?locationNum=11&fps=1 以下是pandas官方的解释: ...