jquery - 动画 flex-basis 但保持 child 的初始高度/宽度

Question

我想为 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/

Answer 1

我设法保持纵横比，请参阅 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>