Question

.a和.b是容器中具有不同高度的内联块点击.a后，
.a将宽度扩展为100％，.b高度扩展为0，这意味着容器只能看到.a，容器高度将更改为.a高度。

我的问题是如何使容器高度变化看起来不像闪光灯，弹跳......让它变得平滑......？我试图在容器中添加转换但不起作用，我想因为我没有设置容器高度，但我不想设置容器高度。

$('.a').on('click', function() {
  $('.container').addClass('expand');
})
$('.back').on('click', function() {
  $('.container').removeClass('expand');
})

.container {
  width: 400px;
  overflow: hidden;
  font-size: 0;
  white-space: nowrap;
}
.container >div {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
}
.a {
  width: 200px;
  height: 100px;
  background-color: blue;
  -webkit-transition: width 0.45s;
  transition: width 0.45s;
}
.b {
  width: 200px;
  height: 1000px;
  max-height: 99999px;
  background-color: red;
  -webkit-transition: max-height 0.45s;
  transition: max-height 0.45s;
}
.container.expand .a {
  width: 100%;
}
.container.expand .b {
  max-height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="back">back</div>
<div class="container">
  <div class="a">a</div>
  <div class="b">b</div>
</div>
<div class="other">other</div>

Answer 1

如果我正确理解您的问题，您可以在函数中添加$('.b').slideUp(400);。

编辑：当然$('.b').slideDown(400);将其恢复原状。

Answer 2

你可以使用Jquery.animate

$( "#a" ).click(function() {
    $( "#b" ).animate({
        height: "100%"
      }, 1000, function() {
        // Animation complete you can do something here aswell.
      });
    });

顺便说一句，如果你想要ui弹跳或使用某些东西：用于动画摆动/弹跳等。 https://jqueryui.com/

这将解释你为什么要使用它;） https://www.google.com/design/spec/motion/material-motion.html

改变内联块容器高度平滑

2 个答案: