Question

我的项目已经准备就绪，我想做的最后一件事就是为.quote-container元素的高度设置动画。目前，它变化非常快，没有任何动画效果，不幸的是，这行CSS不起作用：

.quote-container {
  transition: height 1s;
}

但是，同一行仅适用于#new-quote选择器，工作：

#new-quote {
  transition: height 1s;
}

在gomeYN上查看Lukas的笔@Kestis500（CodePen）。

我制作了一个视频，这样你就可以明白我的意思了： https://www.youtube.com/watch?v=21V3NbAagnk&feature=youtu.be

此外，在0:08 - 0:09秒内，.quote-container元素的上下高度变化。这里发生了什么？

我查看了jQuery文档中的animate()函数，但如果.quote-container中的文本每次按下#new-quote按钮都会更改，我就不明白如何实现它

这与this one不完全相同。我已经完成了那个问题的答案所写的内容，但它仍然无法正常工作。而且它使用的是CSS，而不是JS。我保存了我的codepen：https://codepen.io/Kestis500/pen/gomeYN?editors=0100。有人可以看一看，说出我做错了吗？以下是我的更改：

//CSS
.quote-container, #new-quote { transition: max-height 1s; }

//JS
$("#new-quote").on("click", function() {
  $(".quote-container").css({ maxHeight: 0, overflow: "hidden" });
  $(".quote-text, .quote-author").fadeTo(1000, 0, function() {
    getQuote(function() {
      $(".quote-container, #new-quote").css({
        maxHeight: $(".quote-container").outerHeight()
      });
      $(".quote-text, .quote-author").fadeTo(1000, 1);
    });
  });
});

编辑1 我已经改变了我的代码，所以当页面加载时，它会平滑地改变最大高度，从而得到我需要的平滑动画。 Codepen：https://codepen.io/Kestis500/pen/WdpBqv?editors=0010但是，我仍然在处理click事件，因为它与页面加载的工作方式不同。

编辑2 感谢Twisty的大力帮助:)我已经对自己的偏好做了一些更改，现在唯一需要修复的是动画应该同时开始（#new-quote和.quote-container但是，我认为这很容易解决：）

编辑3 开始了！正是我需要的和动画是惊人的！ :) https://jsfiddle.net/z5hds4Lp/

编辑4 https://jsfiddle.net/z5hds4Lp/2/ - 最终修改。

注意：不要在媒体查询或CSS中使用像素，使用CSS的rems和媒体查询的ems： https://engageinteractive.co.uk/blog/em-vs-rem-vs-px和 https://zellwk.com/blog/media-query-units/

Answer 1

要使用.animate()更改元素的高度，您必须设置像素值。

示例：

$(function() {
  $("#clickme").click(function() {
    $("#book").animate({
      opacity: 1,
      height: 123
    }, 1000, function() {
      // Animation complete.
    });
  });
});

#book {
  width: 20px;
  height: 30px;
  border: 1px solid black;
  background-color: #CCC;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<div id="book"></div>

您可以调整很多CSS属性。大多数人只会采用整数。有些人会采取其他选择。

除了数值，每个属性都可以使用字符串'show'，'hide'和'toggle'。这些快捷方式允许自定义隐藏和显示动画，并考虑元素的显示类型。为了使用jQuery的内置切换状态跟踪，必须始终将'toggle'关键字作为动画属性的值给出。

动画属性也可以是相对的。如果一个值带有前导+=或-=字符序列，则通过在属性的当前值中加上或减去给定数字来计算目标值。

对于您的代码，您可以考虑类似（Snippet）：

$("#new-quote").on("click", function() {
  $(".quote-text, .quote-author").fadeTo(1000, 0, function() {
    getQuote(function() {
      $("#new-quote").animate({
        height: $(".quote-container").outerHeight(),
        opacity: 1
      }, 1000);
    });
  });
});

getQuote(function() {
  $("#new-quote").animate({
    height: $(".quote-container").outerHeight(),
    opacity: 1
  }, 500);
});

工作：https://jsfiddle.net/k24ykxeb/2/

希望这有帮助。

更新1

添加了一些日志记录，包括时间安排，我看到了：

Start. 0
Ready. 14
Animate body, .button:not(#new-quote) Background. 19
Animate Text Color Change. 29
Updating Text Color. 31
Appending  to Head. 32
JSON Callback Started. 888
Running Callback Function. 890
Start Resize Animation. Target Outer Height: 222; 893
JSON Callback Complete. 898
Completed Resize Animation, new height: 222, opacity: 1, after 500ms 1405
Completed Resize Animation, new height: 222, opacity: 1, after 500ms 1406

工作示例：https://jsfiddle.net/k24ykxeb/7/

这里有趣的是我看到动画似乎完成了两次。事件似乎按预期执行。我担心调整大小是在引用和标题附加之前触发的。似乎并非如此。

仍在调查。

更新2

发现padding类的#new-quote .button由.quote-container类定义，与padding: 2.5rem 0.75rem;不匹配。我将其调整为以下内容：

.quote-container

这解决了剩下的40px差距。这个在工作示例中可以在这里看到：https://jsfiddle.net/k24ykxeb/9/

另一种选择是让#new-quote包含.queue()。这将允许它与父级重排。

克隆技术适用于Ajax调用，在那里你不知道会有多少文本，因此你不能计算新的高度，直到文本放在div之后。如果您拉动文本，克隆div，将文本添加到克隆，您可以获取height属性。然后放下克隆，调整容器大小并淡化文本。

更新3

很多都在运动中，必须在特定时间启动它才能使动画正常工作。输入var getQuote = function(e) { /*** Steps 1) Fade Text Out 2) Bounce expansion effect 3) Change color 4) Animate to new size 5) Fade New Text In ***/ var nq, nc, nh = 0; $(".quote-container").queue(function() { // 1) Fade out text console.log("Step 1", Date.now() - start); $(".quote-container").children().animate({ opacity: 0 }, 750); $(this).dequeue(); }) .queue(function() { console.log("Step 3", Date.now() - start); nq = getNewQuote(); nc = getRandomColor(); // 3) Change Color changeColor(nc); $(this).dequeue(); }) .queue(function() { console.log("Step 4", Date.now() - start); // 4) Animate to new size nh = calcNewHeight(nq); $(".quote-container, #new-quote").animate({ height: nh }, 1000); $(this).dequeue(); }) .queue(function() { console.log("Step 5", Date.now() - start); // 5) Fade in new text updateText($(".quote-container"), nq); $(".quote-container").children().fadeTo(750, 1); $(this).dequeue(); }) }; $(function() { console.log("Ready.", Date.now() - start); $("#new-quote").on("click", getQuote); getQuote(); });。

示例：https://jsfiddle.net/k24ykxeb/26/

jQuery Snippet

$.getJSON()

$.ajax()也是异步执行的，所以我切换到async: false以获得cmd权益。

Answer 2

您可以尝试的另一个选项-尽管动画效果略有不同，但您可以先.slideUp()，先更改.html()，然后再更改.slideDown()。这并不是您要找的东西，但这是一个很好的替代方法，可能对其他人有用。

$('#container').slideUp(function(){
     $('#container').html('New content');
     $('#container').slideDown();
});

请注意，.html()和.slideDown()命令嵌套在.slideUp函数中。这样可以确保在.slideUp()完成之前，内容或动画不会发生。

如何使用jQuery在html（）函数后为元素的高度设置动画？

2 个答案: