vue transtion 实现分析
2024-08-30 11:03:36
这是我用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>
最新文章
- Android Handler、Loop 的简单使用
- WPF的二维绘图（一）——DrawingContext
- appserv中php升级问题
- Linux开机后 systemd 自动启动 ceph osd mon进程
- CLOSE_WAIT？项目上线之际遇到这样的烦心事
- IOS 开发文件操作——NSFileManager
- Counterfeit Dollar 分类： POJ 2015-06-12 15:28 19人阅读 评论(0) 收藏
- qt创建android项目后需要加入的参数
- UOJ 08 Quine 是在下输了
- 【疯狂Java讲义学习笔记】【数据类型与运算符】
- C#中的强类型说明
- 基于bootstrap的datetimepicker插件
- laravel框架——路由
- LSI SAS 3008配置操作
- 初学Java ssh之Spring 第二篇
- shell脚本中每次读取文件的一行
- bzoj 2298: [HAOI2011]problem a
- 服务端预渲染之Nuxt（爬坑篇）
- laravel安装laravel-ide-helper扩展进行代码提示(二)
- ajax 浏览网页等待页面