[英]Animate div to full screen size from current position on click, click again to animate back to original size
我正在嘗試模仿這種一般效果... http://www.wolfks.com/about/brand-promises#
到目前為止,我有這個... JSFiddle
JS:
$(document).ready(function(){
$('.people-container').click(function() {
if ($(this).hasClass('close-animate') || !$(this).hasClass('screen-animate')) {
$(this).removeClass('close-animate').addClass('screen-animate');
} else {
$(this).removeClass('screen-animate').addClass('close-animate');
}
});
});
CSS:
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.people-title {
text-align: center;
padding: 25px;
}
.people-container {
background: gray;
margin-top: 10px;
width: 100%;
height: 100px;
position: relative;
}
.screen-animate {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
animation: fill-animate 0.5s forwards;
}
.close-animate {
position: relative;
width: 100%;
height: 100px;
animation: close-animate 0.5s;
}
/** Fill screen animation **/
@keyframes fill-animate
{
50% {
width: 100%;
left: 0;
height: 50%;
}
100% {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
}
/** Close screen animation **/
@keyframes close-animate
{
50% {
width: 100%;
height: 50%;
}
100% {
height: 100px;
width: 100%;
}
}
HTML:
<div class="people-container" style="background-color: red;">
<div class="people-title">
<h1>Carpenter</h1>
</div>
<div class="close-btn">✖</div>
</div>
我無法讓div順利擴展到全屏。 我不需要它完全像示例一樣……基本上只是尋找全屏動畫,然后從div到頁面的原始位置關閉動畫。
有什么幫助嗎?
使用transition
為元素的高度設置動畫,您無需使用position
想法是將被單擊元素的高度設置為全屏尺寸( 100vh
),將其他元素設置為0
。
見摘要:
$(document).ready(function() { $('.people-container').click(function() { if ($(this).hasClass('screen-animate')) { $('.people-container').removeClass('close-animate'); $(this).removeClass('screen-animate'); } else { $('.people-container').addClass('close-animate'); $(this).addClass('screen-animate'); } }); });
body, html { width: 100%; height: 100%; margin: 0; } .people-title { text-align: center; padding: 10px; } .people-container { background: gray; margin-top: 10px; width: 100%; height: 100px; transition: all .5s; } .close-animate { height: 0; margin-top: 0; overflow: hidden; } .screen-animate { height: 100vh; margin-top: 0; } .close-btn { font-size: 24px; position: absolute; top: 10px; right: 10px; display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="people-container" style="background-color: red;"> <div class="people-title"> <h1>Carpenter</h1> </div> <div class="close-btn">✖</div> </div> <div class="people-container"> <div class="people-title"> <h1>Laborer</h1> </div> <div class="close-btn">✖</div> </div> <div class="people-container" style="background-color: blue;"> <div class="people-title"> <h1>Roofer</h1> </div> <div class="close-btn">✖</div> </div>
按照您鏈接的示例網站的方法精簡了版本。 它使用CSS transition
來處理動畫。
$(document).ready(function() { $('.shutter').click(function() { if ($(this).hasClass('close-animate') || !$(this).hasClass('shutterExpanded')) { $(this).removeClass('close-animate').addClass('shutterExpanded'); $('.wrapper').addClass('shutterOpen'); } else { $(this).removeClass('shutterExpanded').addClass('close-animate'); $('.wrapper').removeClass('shutterOpen'); } }); });
body, html { width: 100%; height: 100%; margin: 0; } .wrapper { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; transition: all .5s ease; } .shutter { position: relative; display: block; width: 100%; height: 20%; background: #000; box-sizing: border-box; border-top: 1px solid #323232; transition: all .75s ease; cursor: pointer; overflow: hidden; z-index: 5; box-sizing: border-box; text-align: center; color: #fff; } .shutterOpen .shutter { height: 0; } .shutter.shutterExpanded { height: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="shutter"> <h2 class="shutterTitle">Roofer</h2> </div> <div class="shutter"> <h2 class="shutterTitle">Contractor</h2> </div> <div class="shutter"> <h2 class="shutterTitle">Tiler</h2> </div> <div class="shutter"> <h2 class="shutterTitle">Electrician</h2> </div> </div>
嘗試這個!! 接近就是相似
.screen-animate {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
animation: fill-animate 1.5s forwards;
}
/** Fill screen animation **/
@keyframes fill-animate
{
0% {
width: 100%;
top: 0;
left: 0;
height: 100px;
}
100% {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.