如何在没有更改属性时添加CSS转换？

Question

我知道这可能听起来很奇怪,但是当它改变它的大小时,我怎么能添加到标题的转换？问题是它没有高度相关的css值,它只是带有顶部和底部填充的文本,并且随着文本的变化,高度也会变化.那我怎么能实现过渡这样的东西呢？让我通过代码演示我的意思:

$(document).ready(function() {
    $('.header').click(function() {
      if ($('.header').html() == 'Hello World (Click this header)') {
          $('.header').html('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dapibus. Nullam eget nisl. Nunc auctor. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Praesent vitae arcu tempor neque lacinia pretium. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ac dolor sit amet purus malesuada congue. Pellentesque arcu.');
      } else {
          $('.header').html('Hello World (Click this header)');
      }
  });
});
    

.header {
  color: #fff;
  font-family: helvetica;
  position: fixed;
  right: 0px;
  left: 0px;
  top: 0px;
  padding: 30px 15px;
  background-color: #4d5366;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  user-select: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="header">Hello World (Click this header)</nav>

Answer 1

.header好的，所以你首先要设置 的高度auto。.header然后，当您更改其内容时，会使用 JQuery获取高度，因此使用var headerHeight = $('.header').outerHeight();then 将.headers height 设置为该高度，而不是auto使用$('.header').css({'height': headerHeight}). 但是每次添加新内容时，都必须将高度设置回 auto，以便获取.header包含新内容的新 div 的高度。

显然，您想按.header如下方式添加到转换或类似的内容：transition: height 0.25s ease-in-out;。我希望这有帮助。如果我误解了您的问题或者我是否可以进一步提供帮助，请告诉我。:)