主页 / 问题 / 1120219
Accepted
FeironoX5
Asked:2020-05-04 23:29:58 +0000 UTC2020-05-04 23:29:58 +0000 UTC

CSS - 基于内容的平滑高度变化

  • 772

我有一个div, 里面的部分被改变了。截面有不同的高度。

当从一个移动到另一个时，高度div应该平滑变化。试图transition打赌div。

补充：我在 Angular 中做。div站在里面router-outlet。当您从一个页面移动到另一个页面时，其内容会发生变化。高度也会发生变化。如何使高度的变化平滑，就好像它与属性一样transition？

css

2 个回答

  1. Best Answer

    您将不得不使用脚本找到初始和最终高度值，div或者router-outlet将它们动态放置到相应的元素 - 只有这样过渡才会起作用。浏览器根据它们的开始和结束值计算所有受过渡影响的中间属性值。当然，对于属性事先未知的元素，没有这样的值（在你的情况下，如果是，它等于什么height？ ）。auto

    • 1

  2. 你想要这样的东西吗？

    btn.addEventListener('click', () => {
  content.classList.toggle('active');
});
    *,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
}

#content {
  max-width: 300px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
}

#content::before {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255);
  transition: transform 0.3s ease-in-out;
  transform: translateY(100%);
}

#btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  background-color: black;
  color: white;
  cursor: pointer;
}

#content.active::before {
  transform: translateY(0);
}
    <div id="content">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, sunt incidunt quos eligendi in esse iure eum quam aperiam nulla vero delectus sequi ipsam aut sit modi distinctio corrupti dolor?
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, sunt incidunt quos eligendi in esse iure eum quam aperiam nulla vero delectus sequi ipsam aut sit modi distinctio corrupti dolor?
</div>
<div id="btn">Клик</div>

    当然，您可以更改高度，但是动画height, width, margin,是不好的padding：当我们为这些属性设置动画时，浏览器会重绘页面，这在性能方面是昂贵的

    content.style.height = content.scrollHeight + 'px';

btn.addEventListener('click', () => {
  const height = content.scrollHeight;
  content.classList.toggle('active');
  if (content.classList.contains('active')) {
    content.style.height = '0px';
  } else {
    content.style.height = height + 'px';
  }
});

const ipsum = ' Lorem ipsum, dolor sit amet consectetur adipisicing elit.';

input.addEventListener('input', (e) => {
  const value = e.target.value;
  if (value > 9) return false; // чтобы нельзя было большие куски просто вводить в блок
  for (let i = 0; i < value; i++) {
    content.innerHTML += ipsum;
  }
  content.style.height = content.scrollHeight + 'px';
});
    *,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
}

#btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  background-color: black;
  color: white;
  cursor: pointer;
}

#content {
  max-width: 300px;
  margin: 0 auto;
  margin-top: 10px;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

#input {
  position: absolute;
  right: 0;
  top: 0;
}
    <div id="content">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, sunt incidunt quos eligendi in esse iure eum quam aperiam nulla vero delectus sequi ipsam aut sit modi distinctio corrupti dolor? Lorem ipsum, dolor sit amet consectetur adipisicing
  elit. Exercitationem, sunt incidunt quos eligendi in esse iure eum quam aperiam nulla vero delectus sequi ipsam aut sit modi distinctio corrupti dolor?
</div>
<div id="btn">Клик</div>
<input id="input" type="number" placeholder="Вводи 1-9 цифры">

    • 1

相关问题