Высота перехода на контейнер с неизвестной начальной и конечной высотой в CSS - PullRequest
Новая
       26

Высота перехода на контейнер с неизвестной начальной и конечной высотой в CSS

0 голосов
/ 17 апреля 2020

У меня есть контейнер без атрибута высоты (высота равна содержимому, которое его заполняет), и я изменяю текстовое содержимое в этом контейнере, которое в конечном итоге меняет высоту. Я пытаюсь выяснить, как я могу поместить переход на контейнер для изменения высоты. Я не могу инициализировать высоту в контейнере, потому что this.state.text будет динамически c, а текст, на который он будет изменяться, будет также динамически c. Текущий код, который я сейчас имею, не показывает перехода при изменении высоты контейнера. Вот простой пример, чтобы показать вам, о чем я говорю.

Вот компонент: 

import React, { Component } from "react";

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "Item 2",
    };
  }

  changeText = () => {
    this.setState({
      text:
        "A much longer text@@@@@@@ @@@@@@@ @@@@@@ @@@@@@@@ @@@@@ @@@@ @@@@@@ @@@@ @@@@@ @@@@@@     @@@@@@@ @@@@@@@@@@ @@@@ @@@@ @@@@@@@@@@@@@@@!",
    });
  };

  render() {
    return (
      <div>
        <div className="text">
          <div className="item1">Item 1</div>
          <div className="item2">{this.state.text}</div>
          <div className="item3">Item 3</div>
        </div>
        <button onClick={this.changeText}>Click</button>
      </div>
    );
  }
}

Вот css: 

.text {
  background-color: yellow;
  max-width: 300px;
  transition: all 3s ease-out;
}

Ответы [ 3 ]

1 голос
/ 17 апреля 2020

Вы можете заключить элемент в элемент абзаца, установить высоту div в 0 и скрыть переполнение. После введения текста вы можете установить высоту div в высоту абзаца. 

<!DOCTYPE html>
<html>
  <head>
  	<title>ok.</title>
  	<style>
      div {
        outline: 1px solid black;
        transition-property: height;
        transition-duration: 1s;
        height: 0;
        overflow: hidden;
      }
      p {
        margin:0;
      }
  	</style>
  </head>
  <body>
    <div>
      <p>Item 1</p>
    </div>
    <button id="button1">insert short</button>
    <button id="button2">insert long</button>
    <script>
      let div = document.getElementsByTagName("div")[0]
      let para = document.getElementsByTagName("p")[0]
      let button = document.querySelector("#button1")
      button.addEventListener("click", function() {
            para.innerHTML ="oneliner"
            div.style.height = para.scrollHeight +"px"
      })
      let button2 = document.querySelector("#button2")
      button2.addEventListener("click", function() {
            para.innerHTML ="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."
            div.style.height = para.scrollHeight +"px"
      })
    </script>
  </body>
</html>
0 голосов
/ 17 апреля 2020

Внесены некоторые изменения, чтобы попытаться найти решение, но оно по-прежнему не работает следующим образом ... 

import React, { Component } from "react";

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "Item 2"
    };
  }

  componentDidMount() {
    const height = this.divElement.clientHeight;
    this.divElement.style.maxHeight = height + "px";
  }

  changeText = () => {
    this.setState(
      {
        text:
          "A much longer text@@@@@@@ @@@@@@@ @@@@@@ @@@@@@@@ @@@@@ @@@@ @@@@@@ @@@@ @@@@@ @@@@@@ @@@@@@@ @@@@@@@@@@ @@@@ @@@@ @@@@@@@@@@@@@@@!",
      },
      () => {
        this.divElement.style.maxHeight = null;
        const height = this.divElement.clientHeight;

        this.divElement.style.maxHeight = height + "px";
      }
    );
  };

  render() {
    return (
      <div style={{ margin: "200px" }}>
        <div
          ref={(divElement) => {
            this.divElement = divElement;
          }}
          className="text"
        >
          <div className="item1">Item 1</div>
          <div className="item2">{this.state.text}</div>
          <div className="item3">Item 3</div>
        </div>
        <button onClick={this.changeText}>Click</button>
      </div>
    );
  }
}

Также, когда я раскомментирую max-height в .text, он все испортил, потому что я не хочу, чтобы высота контейнера была 0px; CSS: 

.text {
  background-color: yellow;
  max-width: 300px;
  transition: all 3s ease-out;
  // max-height: 0;
}
0 голосов
/ 17 апреля 2020

Один из способов - установить текст, а затем установить максимальную высоту стиля на высоту прокрутки;

Таким образом, в качестве теста при каждом нажатии кнопки ДОБАВИТЬ добавляется новый текст, чтобы сделать его выше. 

var btn = document.querySelector(".add");

btn.addEventListener("click",function(){
  var _text = document.querySelector(".text");
  _text.innerHTML += "text<BR><BR>adsad<br>sadasd";
  _text.style.maxHeight = _text.scrollHeight + "px";
});
.text {
  background-color: yellow;
  max-width: 300px;
  transition: all 1s ease-out;
  max-height:0;
}
<button type="button" class="add">Add</button>
<div class="text"></div>
...