在没有更改属性的情况下如何添加 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。然后，当您更改它的内容时，使用 JQuery 获取.header 的高度，因此使用var headerHeight = $('.header').outerHeight(); 然后将.headers 高度设置为该高度，而不是使用auto 使用$('.header').css({'height': headerHeight})。但是每次添加新内容时，您都必须将高度设置回自动，以便获得包含新内容的新 .header div 的高度。

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

Answer 2

这是一个调整底部值来控制高度的想法：

$(document).ready(function() {
  $('.header').css('bottom', 'calc(100vh - ' + $('.header div').css('height') + ' - 60px)')
  $('.header').click(function() {
    if ($('.header div').html() == 'Hello World (Click this header)') {
      $('.header div').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 div').html('Hello World (Click this header)');
    }
    $('.header').css('bottom', 'calc(100vh - ' + $('.header div').css('height') + ' - 60px)')
  });
});

.header {
  color: #fff;
  font-family: helvetica;
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
  padding: 30px 15px;
  box-sizing: border-box;
  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">
  <div>Hello World (Click this header)</div>
</nav>

Answer 3

文本交换在屏幕刷新之间瞬间发生，因此除非您可以显式定义和设置/重置元素（内联或样式表）的height，否则在交换文本时它不会“增长或缩小”。

解决此问题的一种方法是使用长短 text-sn-ps 轮询标题的尺寸，存储这些值，并根据每个状态显式定义触发事件时元素的高度。

这里是对 vanilla JavaScript 原理的快速而肮脏的解释......

<!-- HTML -->
<div id="header" class="offpage">Hello World!</div>

---

/*** CSS ***/
#header {
    position: fixed;
    right: 0; left: 0; top: 0;
    height:auto;

    color: #fff;
    background-color: #4d5366;

    font-family: helvetica;
    font-size:1rem;
    line-height:1.6;

    padding: 2rem 1rem;

    cursor: pointer;
    transition: all 0.3s ease-in-out;
    user-select: none;
    overflow: hidden;
}
#header.offpage {
    top: -110%;
}

---

/*** JS ***/
var text = {
    longText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    shortText: "Hello World!"
};

var header;

function setHeaderDimensions() {
    /* grab the height of default text 
       and store it in inline data-* attribute */
    var headerHeight = header.clientHeight
    header.setAttribute("data-dims-shortText", headerHeight);

    /* swap text and grab height of longText */
    header.textContent = text.longText;
    header.setAttribute("data-dims-longText", header.clientHeight);

    /* reset default text */
    header.textContent = text.shortText;

    /* define explicit height of default state */
    header.style.height = headerHeight + "px";

    /* display to page */
    header.classList.remove("offpage");
}

function changeHeaderText(e) {
    /* poll current state */
    var flag = header.classList.contains("long");

    /* set text accordingly */
    header.textContent = text[flag ? "shortText" : "longText"];

    /* grab required stored height */
    header.style.height = header.getAttribute(
        flag ? "data-dims-shortText" : "data-dims-longText"
    ) + "px";

    /* toggle state */
    header.classList.toggle("long");

}

function onPageLoaded() {
    header = document.getElementById("header");

    /* grab and set #header dimensions
       for each text-state (long & short) */
    setHeaderDimensions();

    /* add event handler */
    header.addEventListener("click", changeHeaderText, !1);
}

document.addEventListener("DOMContentLoaded", onPageLoaded, !1);

无论如何，这就是理论。希望你能接受它并运行它。 :D