Início / coding / Perguntas / 79437099
Accepted
XCZ_Mike
Asked: 2025-02-14 00:43:19 +0800 CST

Como redimensiono dois flexboxes em uma animação?

  • 772

Estou tentando criar um aplicativo de bate-papo e, ao pressionar um botão, você pode ver os registros de data e hora das mensagens.

Meu timestamp sempre ocupa 200px de tamanho e o outro ocupa o restante.

Vamos chamar div1 para o registro de data e hora (200px) e div2 para as mensagens (ocupa o resto do espaço).

Tentei usar o translate no primeiro div1 e movê-lo e rapidamente percebi que o div2 não seria redimensionado automaticamente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .chat-container {
            display: flex;
            height: 50vh;
            width: 50vw;
            background-color: #f0f0f0;
        }
        #div1 {
            background-color: #0004ff;
            height: 100%;
            width: 200px;
            text-align: center;
            
            position: relative;
            left:-200px;
            transition: left 1s;
        }
        #div2 {
            background-color: #ff0000;
            height: 100%;
            text-align: center;
            width: calc(100% - 200px); /* 100% - 200px or auto would work*/
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div id="div1">
            <p>div1</p>
        </div>
        <div id="div2">
            <p>div2</p>
        </div>
    </div>
    <button id="button">animation</button>
    <script>
        let actived = false;
        document.getElementById("button").addEventListener("click", function() {
            const div1 = document.getElementById("div1");
            const div2 = document.getElementById("div2");
            div1.style.left = actived ? "-200px" : "0px";
            actived = !actived;
        });
    </script>
</body>
</html>

Então tentei redimensionar o tamanho do div2, mas quando fiz isso, calc(100% - 200px)não ficou do mesmo tamanho!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .chat-container {
            display: flex;
            height: 50vh;
            width: 50vw;
            background-color: #f0f0f0;
            overflow: hidden;
        }
        #div1 {
            background-color: #0004ff;
            height: 100%;
            width: 200px;
            text-align: center;
            
            position: relative;
            left:-200px;
            transition: left 1s;
        }
        #div2 {
            background-color: #ff0000;
            height: 100%;
            text-align: center;
            width: calc(100% - 200px); /* 100% - 200px or auto would work*/

            position: relative;
            transition: width 1s;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div id="div1">
            <p>div1</p>
        </div>
        <div id="div2">
            <p>div2</p>
        </div>
    </div>
    <button id="button">animation</button>
    <script>
        let actived = false;
        document.getElementById("button").addEventListener("click", function() {
            const div1 = document.getElementById("div1");
            const div2 = document.getElementById("div2");
            div1.style.left = actived ? "-200px" : "0px";
            div2.style.width = actived ? "100%" : "calc(100% - 200px)";
            actived = !actived;
        });
    </script>
</body>
</html>

Como pode 100%o pai menos o tamanho do div1 não ser o resto? Estou tão confuso.

Por favor, diga-me qual método devo usar e por que 100% - 200pxnão funciona.

javascript

2 respostas

  1. Best Answer

    Explicação

    A diferença ao alternar é devido ao comportamento implícitoflex-shrink (já que os elementos têm um padrão de flex-shrink: 1em layouts flexíveis:

    A flex-shrinkpropriedade gerencia a remoção do espaço livre negativo para fazer as caixas caberem em seu contêiner sem transbordar. Remover espaço é um pouco mais complicado do que adicionar espaço. O fator de encolhimento flexível é multiplicado pelo tamanho da base flexível; isso distribui o espaço negativo em proporção a quanto o item pode encolher. Isso evita que itens menores encolham 0pxantes que um item maior seja visivelmente reduzido.

    Isto pode ser melhor demonstrado através de um exemplo.

    Dizer chat-containeré 500pxamplo.

    As larguras intrínsecas dos elementos antes de qualquer contração de flexão ocorrer são:

    div1 div2
    200px 100% - 200px
    = 500px - 200px
    = 300px

    Não há encolhimento, tudo se encaixa perfeitamente.

    Clique no botão de animação duas vezes e então o div2 widthagora é 100%, assim:

    div1 div2
    200px 100%
    = 500px

    Agora, div1 e div2 são mais largos que o contêiner, já que alterar leftem div1 não remove o espaço que ele ocupa. Assim, os cálculos de flex shrinking acontecem da seguinte forma:

    Calcule as larguras excedentes dos nossos elementos filhos:

    200px + 500px - 500px = 200px;
 ↑        ↑       ↑
div1     div2  container

    A proporção de div1:div2 é 2:5, portanto alocamos esse 200pxexcedente entre eles da seguinte forma:

    div1 div2
    200px ÷ 7 × 2
    ≈ 57px    		 200px ÷ 7 × 5
    ≈ 143px

    Assim, as larguras finais são as seguintes:

    div1 div2
    143px 357px

    Solução

    Se você quiser realmente deslizar o div1 para dentro e para fora, você pode usar margine deixar o div2 preencher o espaço naturalmente com flex-grow: 1:

    let actived = false;
document.getElementById("button").addEventListener("click", function() {
  const div1 = document.getElementById("div1");
  div1.style.marginLeft = actived ? "-200px" : "0px";
  actived = !actived;
});
    * {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

.chat-container {
  display: flex;
  height: 50vh;
  width: 50vw;
  background-color: #f0f0f0;
  overflow: hidden;
}

#div1 {
  background-color: #0004ff;
  height: 100%;
  width: 200px;
  text-align: center;

  position: relative;
  margin-left: -200px;
  transition: margin-left 1s;
}

#div2 {
  background-color: #ff0000;
  height: 100%;
  text-align: center;
  flex-grow: 1;
}
    <div class="chat-container">
  <div id="div1">
    <p>div1</p>
  </div>
  <div id="div2">
    <p>div2</p>
  </div>
</div>
<button id="button">animation</button>

    • 1

  2. Há muitas partes que entram em um aplicativo de bate-papo, então eu fiz um simples e animei as linhas conforme elas são feitas. Uma animação simples pode quebrar facilmente se o layout for complexo, elementos forem adicionados dinamicamente ou se houver rolagem envolvida, etc. Além disso, a primeira coluna tem 40% de largura em vez de 200px porque larguras absolutas não são responsivas. Os detalhes são comentados no exemplo. Visualizar no Full pagemodo.

    A propósito, matematicamente calc(100% - 200px)deveria funcionar, mas se o pai tiver preenchimento à esquerda e/ou à direita ou se houver uma gappropriedade ou uma barra de rolagem etc., você precisa incluir isso na fórmula também.

    // Reference <form>
const chat = document.forms.chat;
/*
Reference all:
  - <fieldset>
  - <textarea>
  - <button>
*/
const io = chat.elements;
// Reference fieldset#scroller
const scr = io.scroller;
// Reference fieldset#box
const box = io.box;
// Reference <textarea>
const msg = io.message;
// Register <form> to listen for the "submit" event.
chat.addEventListener("submit", send);

/**
 * Creates a current timestamp in the following format:
 * YY-MM-DD HH:MM:SS
 * @return {string} - YY-MM-DD HH:MM:SS
 */
function tStamp() {
  const now = new Date()
  let dT = Date.parse(now.toISOString().slice(0, -5));
  return new Date(dT - (now.getTimezoneOffset() * 120000)).toISOString().slice(2, -5).split("T").join(" ");
}

/**
 * Adds a given string (@param br) at the end of every
 * given number of characters (@param max) in a given 
 * string (@param string).
 * @param {string} string - String to add line breaks to
 * @param {number} max    - Number of characters per line.
 * @param {string} br     - String to add to the end of 
 * @default "\n"            each line.
 * @return {string}       - String with line breaks
 * https://www.30secondsofcode.org/js/s/word-wrap/
 */     
function lBreak(string, max, br = '\n') {
  const rgx = new RegExp(`(?![^\\n]{1,${max}}$)([^\\n]{1,${max}})\\s`, 'g');
  return string.replace(rgx, `$1${br}`);
}

/**
 * "submit" event handler creates a two column row consisting of
 * a timestamp and the text message the user submitted.
 * The .expand class is added to each column to animate them.
 * Scrolling is kept at the bottom of fieldset#scroller.
 * textarea#message is cleared.
 * @param {object} e - Event object
 */
function send(e) {
  e.preventDefault();
  const time = document.createElement("fieldset");
  time.className = "time";
  time.innerHTML = `
      <time>${tStamp()}</time>`;
  const text = document.createElement("fieldset");
  text.className = "text";
  text.innerHTML = `
      <p><b>User </b>${lBreak(msg.value, 32)}</p>`;
  box.append(time, text);
  setTimeout(() => {
    time.classList.add("expand");
  }, 500);
  setTimeout(() => {
    text.classList.add("expand");
  }, 750);
  setTimeout(() => {
    box.lastElementChild.scrollIntoView({
      behavior: "smooth"
    });
  }, 1000);
  msg.value = "";
}
    :root {
  font: 2ch/1.3 "Segoe UI";
  overflow-x: hidden;
}

form {
  width: 50vw;
  margin: 0 auto;
  padding: 8px;
  border-radius: 8px;
  background: #677680;
}

fieldset {
  padding: 0;
  border: 0;
}

p {
  margin: 0;
  padding: 0 5px;
}

.frame {
  padding: 5px 5px 0;
  border-radius: 8px;
  background: #aec7d6;
  overflow: hidden;
}

#scroller {
  display: flex;
  flex-direction: column;
  height: 50vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

#box {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 3px;
  height: min-content;
  background: #677680;
}
/*
width, max-width, font-size, and opacity are animated for
all fieldset.time and fieldset.text when the .expand class
is assigned to them. A ✱ denotes the relevant rulesets.
*/
.time {
  width: 0; /* ✱ */
  max-width: 0; /* ✱ */
  margin-left: 3px;
  font-size: 0; /* ✱ */
  font-family: Consolas;
  color: #fff;
  background: transparent;
  transition: all 1.4s; /* ✱ */
  opacity: 0; /* ✱ */
  overflow: hidden; /* ✱ */
}

.text {
  width: 0; /* ✱ */
  height: auto; 
  max-width: 0; /* ✱ */
  border-radius: 4px;
  background: #dae9f2;
  transition: max-width 1.2s; /* ✱ */
  overflow-y: auto;
}

.expand {
  font-size: 1rem; /* ✱ */
  opacity: 1; /* ✱ */
}

.expand.time {
  width: 40%; /* ✱ */
  max-width: 40%; /* ✱ */
  height: 1.3rem;
}

.expand.text {
  width: 55%; /* ✱ */
  max-width: 55%; /* ✱ */
}

.control {
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-top: 5px;
}

#message {
  border: 0;
  border-radius: 0 0 8px 8px;
  background: transparent;
  resize: none;
}

button {
  position: relative;
  z-index: 1;
  margin-right: -8px;
  border: 0;
  border-radius: 0 0 8px 8px;
  background: #37b35a;
  cursor: pointer;
}
    <form id="chat">
  <fieldset class="frame">
    <fieldset id="scroller">
      <fieldset id="box"></fieldset>
    </fieldset>
    <fieldset class="control">
      <textarea id="message" placeholder="Type your message here..."></textarea>
      <button>Send</button>
    </fieldset>
  </fieldset>
</form>

    • 0

relate perguntas