<html>
<head>
<meta charset="utf-8">
<title>修改代码，右边会自动显示结果</title>
<!--适应移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css样式-->
<style>
body{background-color: #EBEBEB}
.box{
width: 200px;
height: 200px;
background-color: red;
transition: all.5s;
transform: scale(0.8);
opacity: 0;
}
.box-show{
transform: scale(1);
opacity: 1;
}
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button class="button" type="submit">按钮</button>
<script type="text/javascript">
$('.button').click(function(){
var boxDom = $('.box')[0];
console.log(boxDom);
if(!boxDom){
var el = document.createElement('div');
el.className = 'box';
document.body.appendChild(el);
nextFrame(_=>{
$('.box').toggleClass('box-show')
})
}else{
$('.box').toggleClass('box-show')
// nextFrame(_=>{
// document.body.removeChild(boxDom)
// })
setTimeout(_=>{
document.body.removeChild(boxDom)
},500)
}
})
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
function nextFrame(fn){
requestAnimationFrame(_=>{
requestAnimationFrame(fn)
})
}
</script>
</body>
</html>requestAnimationFrame 帧动画
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
