平滑宽度变化的动画

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 {

    // all your setup

    width: 20vw;

}

.categories #cat.open {

   width: 50vw;

   white-space: nowrap;

 }

并且您的转换应该可以正常工作，其中空白在这里很重要，因为当您删除它时， ul 将打印，您会看到奇怪的行为

更新

  $(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;

    width:20vw;

    display: inline-block;

    transition: all 300ms linear;

}

.categories #cat.open {

 width: 50vw;

 white-space: nowrap;

}

.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>