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

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>