Javascript 单击时将div从当前位置设置为全屏大小，再次单击可将其设置为原始大小_Javascript_Jquery_Css

Javascript 单击时将div从当前位置设置为全屏大小，再次单击可将其设置为原始大小

javascript jquery css

Javascript 单击时将div从当前位置设置为全屏大小，再次单击可将其设置为原始大小,javascript,jquery,css,Javascript,Jquery,Css,我试着模仿这种普遍的效果到目前为止我有这个 JS: $(document).ready(function(){ $('.people-container').click(function() { if ($(this).hasClass('close-animate') || !$(this).hasClass('screen-animate')) { $(this).removeClass('close-animate').addClass('scree

我试着模仿这种普遍的效果

到目前为止我有这个

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');
      }
    });
});

<div class="people-container" style="background-color: red;">

  <div class="people-title">
    <h1>Carpenter</h1>
  </div>

  <div class="close-btn">&#10006;</div>

</div>

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:

 $(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');
      }
    });
});

<div class="people-container" style="background-color: red;">

  <div class="people-title">
    <h1>Carpenter</h1>
  </div>

  <div class="close-btn">&#10006;</div>

</div>


木匠
✖

我很难让div顺利地放大到全屏。我不需要它完全像这个例子。。。基本上只是寻找全屏动画和关闭动画从和到div在页面上的原始位置

有什么帮助吗？

使用

transition

来设置元素高度的动画，您不需要使用

position

其想法是将单击的元素的高度设置为全屏大小（

100vh

），将其他元素设置为

请参见片段：

 $(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');
      }
    });
});

<div class="people-container" style="background-color: red;">

  <div class="people-title">
    <h1>Carpenter</h1>
  </div>

  <div class="close-btn">&#10006;</div>

</div>

$（文档）.ready（函数（）{
$（'.people container'）。单击（函数（）{
if（$（this）.hasClass（'screen-animate'））{
$（'.people container'）.removeClass（'close-animate'）；
$（this.removeClass（'screen-animate'）；
}否则{
$（'.people container'）.addClass（'close-animate'）；
$（this.addClass（'screen-animate'）；
}
});
});
body，
html{
宽度：100%；
身高：100%；
保证金：0；
}
.人的头衔{
文本对齐：居中；
填充：10px；
}
.人员容器{
背景：灰色；
边缘顶部：10px；
宽度：100%；
高度：100px；
过渡：全部5秒；
}
.关闭动画{
身高：0；
边际上限：0；
溢出：隐藏；
}
.屏幕动画{
高度：100vh；
边际上限：0；
}
.关闭btn{
字体大小：24px；
位置：绝对位置；
顶部：10px；
右：10px；
显示：无；
}

木匠
✖
劳动者
✖
屋顶工
✖
使用transition
来设置元素高度的动画，您不需要使用position

其想法是将单击的元素的高度设置为全屏大小（100vh
），将其他元素设置为0

请参见片段：
 $(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');
      }
    });
});

<div class="people-container" style="background-color: red;">

  <div class="people-title">
    <h1>Carpenter</h1>
  </div>

  <div class="close-btn">&#10006;</div>

</div>


$（文档）.ready（函数（）{
$（'.people container'）。单击（函数（）{
if（$（this）.hasClass（'screen-animate'））{
$（'.people container'）.removeClass（'close-animate'）；
$（this.removeClass（'screen-animate'）；
}否则{
$（'.people container'）.addClass（'close-animate'）；
$（this.addClass（'screen-animate'）；
}
});
});
body，
html{
宽度：100%；
身高：100%；
保证金：0；
}
.人的头衔{
文本对齐：居中；
填充：10px；
}
.人员容器{
背景：灰色；
边缘顶部：10px；
宽度：100%；
高度：100px；
过渡：全部5秒；
}
.关闭动画{
身高：0；
边际上限：0；
溢出：隐藏；
}
.屏幕动画{
高度：100vh；
边际上限：0；
}
.关闭btn{
字体大小：24px；
位置：绝对位置；
顶部：10px；
右：10px；
显示：无；
}

木匠
✖
劳动者
✖
屋顶工
✖
按照您链接的示例网站的方法精简版本。它使用CSStransition
来处理动画

$（文档）.ready（函数（）{
$（'.shutter'）。单击（函数（）{
if（$（this）.hasClass（'close-animate'）| |！$（this）.hasClass（'shutterExpanded'））{
$（this）.removeClass（'close-animate'）.addClass（'shutterExpanded'）；
$（'.wrapper'）.addClass（'shutterOpen'）；
}否则{
$（this）.removeClass（'shutterExpanded'）.addClass（'close-animate'）；
$（'.wrapper'）.removeClass（'shutterOpen'）；
}
});
});
body，
html{
宽度：100%；
身高：100%；
保证金：0；
}
.包装纸{
位置：相对位置；
显示：块；
宽度：100%；
身高：100%；
溢出：隐藏；
过渡：所有。5s轻松；
}
.百叶窗{
位置：相对位置；
显示：块；
宽度：100%；
身高：20%；
背景：#000；
框大小：边框框；
边框顶部：1px实心#323232；
过渡：全部.75秒缓解；
光标：指针；
溢出：隐藏；
z指数：5；
框大小：边框框；
文本对齐：居中；
颜色：#fff；
}
.快门打开，快门{
身高：0；
}
.百叶窗{
身高：100%；
}

屋顶工
承包商
瓦工
电工
按照您链接的示例网站的方法精简版本。它使用CSStransition
来处理动画

$（文档）.ready（函数（）{
$（'.shutter'）。单击（函数（）{
if（$（this）.hasClass（'close-animate'）| |！$（this）.hasClass（'shutterExpanded'））{
$（this）.removeClass（'close-animate'）.addClass（'shutterExpanded'）；
$（'.wrapper'）.addClass（'shutterOpen'）；
}否则{
$（this）.removeClass（'shutterExpanded'）.addClass（'close-animate'）；
$（'.wrapper'）.removeClass（'shutterOpen'）；
}
});
});
body，
html{
宽度：100%；
身高：100%；
保证金：0；
}
.包装纸{
位置：相对位置；
显示：块；
宽度：100%；
身高：100%；
溢出：隐藏；
过渡：所有。5s轻松；
}
.百叶窗{
位置：相对位置；
显示：块；
宽度：100%；
身高：20%；
背景：#000；
框大小：边框框；
边框顶部：1px实心#323232；
过渡：全部.75秒缓解；
光标：指针；
溢出：隐藏；
z指数：5；
框大小：边框框；
文本对齐：居中；
颜色：#fff；
}
.快门打开，快门{
身高：0；
}
.百叶窗{
身高：100%；
}

屋顶工
承包商
瓦工
电工
试试这个！！相近
.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;
    }
}

试试这个！！相近
.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;
    }
}

所以你想实现他们所做的，你真的看过他们所做的吗？据我所知，这一切都是通过CSS实现的。在他们的页面上查看源代码。非常整洁的效果，但看起来没问题。所以你想实现他们所做的，你真的看过他们所做的吗？据我所知，这是