如何在父弹性框div中制作一个div，从左侧滑入？

Question

我有两个并排在弹性框中的 div，我试图让左侧 div 在被 JavaScript 函数调用后滑入，然后将右侧 div 调整大小以使其位于左侧 div 旁边。

我以前从未做过任何 css 转换，所以我真的不知道从哪里开始。我正在使用 bootstrap CSS 库

html,
body {
  height: 100%;
  font-family: "Poppins", sans-serif;
}

.brand {
  font-family: "Rock Salt", sans-serif;
}

.leftside {
  width: 50%;
  height: 100%;
  padding: 2rem;
  overflow: scroll;
  overflow-x: hidden;
  background-color: #DEE2E6;
}

.rightside {
  width: 50%;
  height: 100%;
  padding: 2rem;
  background-color: #F8F9FA;
}

.leftside::-webkit-scrollbar {
  display: none;
}

<div class="d-flex" style="width: 100%;height: 100%;">
  <div class="leftside">

    <div class="card" style="width: 100%;">
      <div class="card-body">
        <h5 class="card-title">Product title</h5>
        <h6 class="card-subtitle mb-2 text-body-secondary">$50</h6>
        <p class="card-text">Some quick example text to build on the product title and make up the bulk of the card's content.
        </p>
      </div>
    </div>

  </div>
  <div class="rightside">
    <div class="card" style="width: calc(50% - 4rem);position: absolute; bottom: 2rem;">
      <div class="card-body">
        <h2 class="card-title"><span id="brand">Store Name Here</span></h2>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
</div>

我尝试使用基本的 css 过渡，但它并没有真正达到我想要的效果，而且非常快。上面的代码是我尝试过的没有 css 转换的基础。

Answer 1

要更改这两个 div 的位置，您可以使用

flex-direction: row-reverse;

但此属性不适用于过渡。因为只有当两个量化值发生变化时，转换才会起作用。这是我的解决方案：

将这些代码添加到您的 css 文件中：

@keyframes left_to_right {
    from {
        left: 0;
    }

    to {
        left: 50%;
    }
}

@keyframes right_to_left {
    from {
        right: 0;
    }

    to {
        right: 50%;
    }
}

.parent-transitions {
    transition: all 2s;
    position: relative;
}

.right-transitions {
    transition: all 2s;
    position: relative;
    animation: right_to_left 5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.left-transitions {
    transition: all 2s;
    position: relative;
    animation: left_to_right 5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

还将这些代码添加到 JavaScript 文件中：

let rightside = document.querySelector(".rightside")
let leftside = document.querySelector(".leftside")
let fisrtDiv = document.querySelector("div")

function start() {
    fisrtDiv.classList.add("parent-transitions")
    rightside.classList.add("right-transitions")
    leftside.classList.add("left-transitions")
}

最后在控制台中运行此函数。