主页 / coding / 问题 / 79437099
Accepted
XCZ_Mike
Asked: 2025-02-14 00:43:19 +0800 CST

如何在动画中调整两个 Flexbox 的大小？

  • 772

我正在尝试制作一个聊天应用程序，只需按一下按钮，您就可以看到消息的时间戳滑入。

我的时间戳总是占用 200px 的大小，而另一个占用其余的大小。

我们将 div1 称为时间戳 (200px)，将 div2 称为消息 (占用剩余空间)。

我尝试在第一个 div1 上使用翻译并移动，很快意识到 div2 不会自动调整大小：

<!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>

因此我尝试调整 div2 的大小，但这样做之后calc(100% - 200px)大小却不一样了！！

<!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>

100%父元素减去 div1 的大小怎么会不是剩余的大小呢？我好困惑啊。

请告诉我应该使用什么方法以及为什么100% - 200px不对齐。

javascript

2 个回答

  1. Best Answer

    解释

    切换时的差异是由于隐式flex-shrink行为flex-shrink: 1造成的（因为元素在弹性布局中具有默认设置：

    该flex-shrink属性管理移除负自由空间，以使框适合其容器而不会溢出。移除空间比添加空间稍微复杂一些。弹性收缩因子乘以弹性基础尺寸；这会按项目可以收缩的程度按比例分配负空间。这可以防止较小的项目在0px较大的项目明显缩小之前收缩。

    通过例子可以更好地证明这一点。

    说得chat-container广500px。

    在发生任何弹性收缩之前，元素的固有宽度是：

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

    没有发生任何缩小，一切都完全合适。

    单击动画按钮两次，则div2的动画width为100%，因此：

    div1 div2
    200px 100%
    = 500px

    现在，div1 和 div2 比容器更宽，因为更改leftdiv1 不会删除它占用的空间。因此，flex 收缩计算如下：

    计算子元素的剩余宽度：

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

    div1：div2 的比例为，因此我们在它们之间按如下方式2:5分配该盈余：200px

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

    因此最终的宽度如下：

    div1 div2
    143px 357px

    解决方案

    如果您真的想将 div1 滑入和滑出，则可以使用margin，然后让 div2 自然填充空间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. 聊天应用程序包含很多部分，因此我制作了一个简单的应用程序，然后在制作过程中对行进行动画处理。如果布局复杂、元素是动态添加的，或者涉及滚动等，简单的动画很容易中断。此外，第一列的宽度为 40%，而不是 200px，因为绝对宽度不响应。详细信息已在示例中注释。在Full page模式下查看。

    顺便说一句，从数学上来说calc(100% - 200px)应该可行，但如果父级有左和/或右填充或者有一个gap属性或者有一个滚动条等，您也需要将其包括在公式中。

    // 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

相关问题