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

Question

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

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

<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 之间的变化，以及与它们捆绑在一起的任何其他变化。

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

显示元素。
调用动画。

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

Answer 2

看看这是否有帮助： https://jsfiddle.net/j8zuc40y/4/

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

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

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

<div class="block"></div>

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

Set element to display and widen using CSS transitions

javascript

css

jquery

transitions