这是我用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>