本文介绍了在固定位置为屏幕大小设置动画元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在单击后为<div>
设置动画以使其适合屏幕.始终停留在固定位置,然后显示该<div>
How do I animate a <div>
to expand to fit the screen upon clicking. All while staying in fixed position, then revealing the contents of that <div>
图片:
推荐答案
- 为您的元素设置CSS3
transition
. - 创建一个类,使您的元素
100vw
和100vh
(视口宽度高度单位) 点击 - 添加该课程
- Set a CSS3
transition
to your element. - Create a class that makes your element
100vw
and100vh
(viewport width height units) - Add that class on click
$("#box").on("click", function() {
$(this).toggleClass("fullScreen");
});
html, body{height:100%;margin:0;}
/* YOUR BOX */
#box{
position: fixed;
overflow: hidden; /* in order to contain content */
/* The initial styles: */
border-radius: 25px;
background: red;
left:50px; bottom:50px;
width: 50px;
height: 50px;
/* TRANSITION TO THE RESCUE */
transition: 0.7s;
-webkit-transition: 0.7s;
}
/* ADD THIS CLASS WITH JS */
#box.fullScreen{
/* Your override styles: */
border-radius: 0;
background: gold;
left:0; bottom:0;
width: 100vw;
height:100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">CLICK</div>
这篇关于在固定位置为屏幕大小设置动画元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!