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 实现分析 的全部内容, 来源链接: utcz.com/z/378446.html