vue transtion 实现分析
Posted zph666
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于vue transtion 实现分析的主要内容，如果未能解决你的问题，请参考以下文章
css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。