javascript - 使用 CSS 过渡将元素设置为显示和加宽

Question

我今天正在创建一些简单的东西，但它的行为并不像我理解的那样。本质上，我想要做的是让一个元素显示自身，并在单击按钮时从窄宽度加宽到宽宽度。

当然有上百万种方法可以做到这一点，但我正在尝试通过简单的 CSS 转换来做到这一点。我所拥有的是设置为显示的元素:无，然后添加一个将其更改为显示的类: block 并像这样过渡到更大的宽度:

<p class="cl">Click Here</p>
<div class="block"></div>

$(document).ready(function() {
    $('.cl').on("click", function() {
    $('.block').addClass("widen");
  });
});

.block {
  background-color: red;
  display: none;
  width: 200px;
  height: 200px;
}

.widen {
  display: block;
  background-color: blue;
  transition: width 2s;
  width: 400px;
}

JS Fiddle Here

这会导致 div 显示，但当我需要它做的事情出现时，它会以完整的、更宽的宽度出现，然后花两秒钟的时间展开到它的完整宽度。

如您所知，我仍然是一个转换新手。我应该怎么做，我错过了什么？

Answer 1

CSS 无法为 display: none 和 display: block 之间的变化以及与它们捆绑在一起的任何其他变化设置动画。

要绕过它，您需要将该过程分为两个阶段:

1. 显示元素。
2. 调用动画。

$(document).ready(function() {
  $('.cl').on("click", function() {
    var $block = $('.block')
    $block.show();
    
    // wait for the next frame before applying the animation
    requestAnimationFrame(function() {
      $block.addClass("widen");
    });
  });
});

.block {
  background-color: red;
  display: none;
  width: 200px;
  height: 200px;
}

.widen {
  background-color: blue;
  transition: all 2s; /** changed transition to all to animation the color as well **/
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="cl">Click Here</p>
<div class="block"></div>