javascript - div 从右滑到全宽

Question

目前，我正在构建一个样式指南，我对元素的过渡有疑问。想象一下，您有一个容器，其中包含两个彼此相邻的元素。两者都有 50% 的宽度。左侧元素应始终可见，但右侧元素从右侧滑入其 50% 宽度。我怎样才能实现这样的目标？我对 top、bottom、left、right、position:absolute 属性有点不知所措。

html 看起来像这样:

<div class="module-container">
  <div class="first-element">
  <div class="second-element">
</div>

和这样的CSS:

.module-container {
    display: flex;
}

.first-element {
    width: 50%;
}

.second-element {
    width: 50%;
}

第二个元素首先需要哪些属性？按下按钮后，我应该通过 JavaScript 添加哪些？

Answer 1

尝试使用 jQuery 和转换

$('#btn').click(function() {
  $('.secondElement').toggleClass("slide");
});

.moduleContainer {
    display: flex;
    height: 100px;
    overflow: hidden;
}

.firstElement {
    position: relative;
    width: 50%;
    border: 1px solid #000;
}

.secondElement {
    position: relative;
    width: 50%;
    border: 1px solid #000;
    left: 100%;
    transition: left 1s;
}

.secondElement.slide {
    left: 0;
}

#btn {
    display: block;
    margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="moduleContainer">
  <div class="firstElement"></div>
  <div class="secondElement"></div>
</div>

<button id="btn">Click Here</button>