平滑宽度变化的动画

Question

我有 div，一旦单击文本从Category我下面的列表更改为display: none，单击会将其触发为display: block。

我让那部分工作了，但我不知道如何进行过渡，以便宽度会平滑拉伸，而不是一次全部拉伸。

  $(document).ready(function(){

    $( '#cat' ).click(function() {

      if($('#cat').hasClass('open')){

          $('#cat').removeClass('open');

      }

      else{

          $('#cat').addClass('open');

      }

    });

  });

.categories #cat{

    z-index: 10;

    border: 1px solid black;

    padding: 10px 70px;

    background-color: black;

    color: white;

    cursor: pointer;

    outline: none;

    display: inline-block;

    transition: all 300ms linear;

}

.list{

  display: none;

  list-style: none;

  padding: 0;

  margin-top: 0 !important;

  margin-bottom: 0 !important;

}

.list li{

  display: inline-block;

  margin: 0 5px;

}

.open .list{

  display: block;

}

.open span{

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="categories">

      <br/>

      <h1>New Collection</h1>

      <br/>

        <div id="cat">

          <span>Categories</span>

          <ul class="list">

            <li>test</li>

            <li>test</li>

            <li>test</li>

            <li>test</li>

            <li>test</li>

          </ul>

        </div>

    </div>

我尝试过添加transition: all 300ms ease-in-out和/或linear，但没有成功。也尝试animate()在 jquery 中使用，并且css().

如何平滑地显示元素宽度变化？

Answer 1

AFAIK，当他打开类且没有类时，你需要设置 div 的宽度，例如：.categories #cat {&nbsp; &nbsp; // all your setup&nbsp; &nbsp; width: 20vw;}.categories #cat.open {&nbsp; &nbsp;width: 50vw;&nbsp; &nbsp;white-space: nowrap;&nbsp;}并且您的转换应该可以正常工作，其中空白在这里很重要，因为当您删除它时， ul 将打印，您会看到奇怪的行为更新&nbsp; $(document).ready(function(){&nbsp; &nbsp; $( '#cat' ).click(function() {&nbsp; &nbsp; &nbsp; if($('#cat').hasClass('open')){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#cat').removeClass('open');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#cat').addClass('open');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });.categories #cat{&nbsp; &nbsp; z-index: 10;&nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; padding: 10px 70px;&nbsp; &nbsp; background-color: black;&nbsp; &nbsp; color: white;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; outline: none;&nbsp; &nbsp; width:20vw;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; transition: all 300ms linear;}.categories #cat.open {&nbsp;width: 50vw;&nbsp;white-space: nowrap;}.list{&nbsp; display: none;&nbsp; list-style: none;&nbsp; padding: 0;&nbsp; margin-top: 0 !important;&nbsp; margin-bottom: 0 !important;}.list li{&nbsp; display: inline-block;&nbsp; margin: 0 5px;}.open .list{&nbsp; display: block;}.open span{&nbsp; display: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="categories">&nbsp; &nbsp; &nbsp; <br/>&nbsp; &nbsp; &nbsp; <h1>New Collection</h1>&nbsp; &nbsp; &nbsp; <br/>&nbsp; &nbsp; &nbsp; &nbsp; <div id="cat">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Categories</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>test</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>test</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>test</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>test</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>test</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>