为什么宽度过渡跳跃

Question

我在设置转换时遇到问题。基本上一切看起来都很好，几乎可以正常工作，但我有“跳跃”效果：不是将宽度从 100% 平滑地更改为 100px，而是跳跃 100% -> "min-content" -> 100px。

JSFiddle：https://jsfiddle.net/oth8k35q/27/

主要代码部分：

<div style="display:inline-flex; width: 400px; border: 1px dotted black;">
  <div id="c1" class="active">
    <div> 1 </div> <div id="d1"> 1 </div>
  </div>
  <div id ="c2">
    <div> 1 </div> <div id="d2"> 1 </div>
  </div>
</div>

#d1, #d2 {
  width: 100px;
}

.active, .active #d1, .active #d2 {
  width: 100%;
}

#d1, #d2 {
  transition: width 1s;
}

Answer 1

我在#c1.active#d1,#c2.active#中添加了transition:width 1s;属性 d2.

var change = function(selector){
  $(".active").removeClass('active');
   $(selector).addClass('active');
}
$('#d1').click(function(){
  change('#c1');
});

$('#d2').click(function(){
  change('#c2')
});

#d1 {
  background-color: green;
  width: 100px;
}
#d2 {
  background-color: red;
  width: 100px;
}
.active{
  width: 100%;
}
#c1, #c2 {
  display: inline-flex;
}
#c1.active #d1, #c2.active #d2 {
  width: 100%;
  transition: width 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display: flex; width: 400px; border: 1px dotted black;">
  <div id="c1" class="active">
    <div>1</div>
    <div id="d1">d1</div>
  </div>
  <div id="c2">
    <div>1</div>
    <div id="d2">d2</div>
  </div>
</div>

Answer 2

您好，试试这个，因为 100% 宽度会导致过渡出现问题。

    .active, .active #d1, .active #d2 {
      width: calc(400px - 100px);
    }

Answer 3

我的假设是你的跳跃是由你的flex-box的flex-grow行为引起的。为避免这种情况，您可以尝试为 flex-grow 和 flex-shrink 属性设置动画。适用于 Chrome，未在其他浏览器中测试。

你伪min-width可以通过改变classcontainer的width来改变，例如

.container{
  display: inline-flex;
  width: 125px;
  flex-shrink: 100;
  flex-grow: 1;
  transition: flex-grow 1s cubic-bezier(0.4, 0, 0.2, 1), flex-shrink 1s cubic-bezier(0.4, 0, 0.2, 1);
}

function toggleClasses(){
    document.getElementById('container-1').classList.toggle('active');
    document.getElementById('container-2').classList.toggle('active');
}

document.getElementById('container-1').addEventListener('click', () => {
    if(document.getElementById('container-1').classList.contains('active')) return;
    toggleClasses();
});

document.getElementById('container-2').addEventListener('click', () => {
  if(document.getElementById('container-2').classList.contains('active')) return;
    toggleClasses();
});

.wrapper{
  display:inline-flex; 
  width: 400px; 
  border: 1px dotted black;
  box-sizing: border-box;
  overflow: auto;
}

.wrapper .container:nth-child(1){
  background: lightblue;
}
.wrapper .container:nth-child(2){
  background: blue;
}

.wrapper .container:nth-child(1) div:last-child{
  background: rgba(255,0,0,0.33);
  cursor: pointer;
}
.wrapper .container:nth-child(2) div:last-child{
  background: rgba(0,255,0,0.33);
   cursor: pointer;
}

.container{
  display: inline-flex;
  width: 100%;
  flex-shrink: 100;
  flex-grow: 1;
  transition: flex-grow 1s cubic-bezier(0.4, 0, 0.2, 1), flex-shrink 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.container.active{
  flex-grow: 100;
  flex-shrink: 1;
}

.element{
  width: 100%;
}

<div class="wrapper">
    <div id="container-1" class="container active">
        <div>1</div>
        <div class="element">Content#1</div>
    </div>
    <div id="container-2" class="container">
        <div>1</div>
        <div class="element">Content#2</div>
    </div>
</div>

为什么宽度过渡跳跃

Why width transition is jumping

css

css-transitions