javascript - 为 block 元素的宽度设置动画，因为它随 jQuery 的变化而变化？

Question

我有一个 block 元素，它根据它所处的状态改变它的宽度。

Here's a fiddle向您展示我的意思。

单击黑色按钮时，您会看到该按钮内的文本发生变化，从而减小了整体宽度。我想知道是否有一种方法可以通过 CSS 或 JS 在单击按钮时让宽度平滑地设置动画。

HTML

<a id="contact-button" href="#">Get in touch</a>

<div id="primary"></div>
<div id="contact-keebs"></div>

CSS

#contact-button {
    background: #000;
    background-size: 24px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
#primary {
    background: red;
    height: 200px;
    position: absolute;
    width: 200px;
}
#contact-keebs {
    background: blue;
    display: none;
    height: 200px;
    position: absolute;
    width: 200px;
}

JS

var c = 0;
$('#contact-button').click(function (e) {

    e.preventDefault();

    if (c++ % 2 == 0) {

        $(this).addClass('work-button').text('Work');
        $('body').addClass('contact-content');
        $('#contact-keebs').finish().stop().fadeIn(500);

    } else {

        $(this).removeClass('work-button').text('Get in touch');
        $('body').removeClass('contact-content');
        $('#contact-keebs').finish().stop().fadeOut(500);

    }
});

Answer 1

您可以使用 transition 为 width 设置动画。

var c = 0;
$('#contact-button').click(function(e) {
  e.preventDefault();
  if (c++ % 2 == 0) {
    $(this).addClass('work-button').text('Work');
    $('body').addClass('contact-content');
    $('#contact-button').css('width', '30px');
    $('#contact-keebs').finish().stop().fadeIn(500);
  } else {
    $(this).removeClass('work-button').text('Get in touch');
    $('#contact-button').css('width', '85px');
    $('body').removeClass('contact-content');
    $('#contact-keebs').finish().stop().fadeOut(500);
  }
});

#contact-button {
  background: #000;
  background-size: 24px;
  color: #fff;
  width: 85px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  padding: 10px 20px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  transition: all 0.4s cubic-bezier(.09,1.31,1,1.28);
  white-space: pre;
  overflow: hidden;
}
#primary {
  background: red;
  height: 200px;
  position: absolute;
  width: 200px;
}
#contact-keebs {
  background: blue;
  display: none;
  height: 200px;
  position: absolute;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="contact-button" href="#">Get in touch</a>
<div id="primary"></div>
<div id="contact-keebs"></div>