动画弹性基础但保持儿童的初始高度/宽度

Posted 2021-04-21

我想为flex-container的宽度设置动画，但要保持子容器的初始宽度和高度。由于我的child-div给出了我的flex-items的总高度，所以带有bg-image的容器应该保持在相同的初始高度。

$('.close').click(function(){
  $('.slideMe').toggleClass('visible');
  $('.btn').toggleClass('close');
});

.flexWrapper {
  display: flex;
  position:relative;
  }

  .slideMe {
  background:white;
  flex:0 0;
  overflow:hidden;
  }

  .slideMe.visible {
  flex: 0 30%;
  }

  .bg-image {
  flex: 1;
  background: url(https://images.pexels.com/photos/547114/pexels-photo-547114.jpeg) no-repeat center center;
  background-size: cover;
  }

  .btn {
  position:absolute;
  left:0;
  top:0;
  padding:2px 5px;
  background: #000;
  color:#FFF;
  cursor:pointer
  }

  .btn.close {
  left:30%
  }

  .animate {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  }
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexWrapper">
   <div class="btn animate close">click</div>
   <div class="slideMe animate visible">
    <div class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
   </div>
   <div class="bg-image"></div>
  </div>

https://jsfiddle.net/psu2fhut/18/

答案

我已设法保持纵横比，请参阅JS / CSS说明。希望这能指出你正确的方向。

$('.close').click(function(){
    $('.slideMe').toggleClass('visible');
    $('.btn').toggleClass('close');
    $('.slideBackground').toggleClass('active'); // This to set negative margin when user clicked button
});

.flexWrapper {
  display: flex;
  position:relative;
}

.slideMe { 
  background:white;
  flex: 0 0 30%; /* No grow, no shrink, while staying 30% of it's parent */
  overflow:hidden;
}

.whatever {
  flex: 1 1 auto; /* May grow, may shrink */
  background: url(https://images.pexels.com/photos/547114/pexels-photo-547114.jpeg) no-repeat center center;
  background-size: cover;
}

.slideBackground.active {
  margin-left: -30%; /* Set negative value based on text width */
}

.btn {
  position:absolute;
  left:0;
  top:0;
  padding:2px 5px;
  background: #000;
  color:#FFF;
  cursor:pointer
}

.btn.close {
  left:30%
}

.animate {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
   transition: all 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexWrapper">
<div class="btn animate close">click</div>
  <div class="slideMe animate visible">
   <div class="lorem">
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
   </div>
  </div>
  <div class="whatever animate slideBackground">
       <!-- slideBackground class added... cause this will be the actual element that's sliding. -->
  </div>
</div>

以上是关于动画弹性基础但保持儿童的初始高度/宽度的主要内容，如果未能解决你的问题，请参考以下文章

基于儿童身高的动画高度

如何保持恒定的图像高度？卡在弹性盒子里？

如何使 SVG 宽度响应但保持 SVG 高度不变？

为啥弹性项目的宽度和高度会影响弹性项目的呈现方式？

自动布局动画保持 UILabel 居中

MotionLayout 和 ConstraintLayout 不围绕儿童高度设置动画