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();然后将.header的高度设置为该高度，而不是使用{{1} }。但是，每次添加新内容时，都必须将高度重新设置为auto，以获取其中包含新内容的新auto div的高度。

很显然，您接下来要按以下方式或类似方式向$(.header).css({height: headerHeight})添加过渡：.header。希望对您有所帮助。让我知道我是否误解了您的问题，或者我可以进一步帮助您。：）

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，否则在交换文本时不会“增长或收缩”

一种解决方法是，用长短文本片段轮询标题的尺寸，存储这些值，并根据每种状态触发事件时显式定义元素的高度。

下面是对香草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

没有变化的属性时如何添加CSS过渡？

3 个答案: