• vue transtion 实现分析


    这是我用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>
  • 相关阅读:
    C# 规格说明书
    C#学习笔记----复习笔记
    C#学习笔记-stream,win8.1开发小记
    C#学习笔记-Win8.1 store app winform开发小记
    C#学习笔记:linq和xml
    C#第六周--关于正则表达式应用,delegates关键字
    C#第六课---struct,interface
    C#第五课--继承和多态
    开发了一款小程序
    「CSS Warning 2」icon 的做法
  • 原文地址:https://www.cnblogs.com/zph666/p/11604000.html
Copyright © 2020-2023  润新知