主页 / 问题 / 1213648
Accepted
kEEBR
Asked:2021-12-04 00:49:38 +0000 UTC2021-12-04 00:49:38 +0000 UTC

行程块

  • 772

我想知道如何做到这一点，以便当您单击某个按钮（或任何其他元素）时，两个块中的一个（在另一个块内）离开屏幕，之后第二个块将占据 100%的宽度并出现在屏幕线的左边缘，当点击时，一切都回到了它的位置。这是我试图做的。没有办法让黑线“粘”在方块上，当方块离开时，它会留在屏幕边缘。HTML 代码：

<section class="main">
<div class="open" id="open"></div>
      <div class="main_projects" id="projects">
        // контент
      </div>
      <div class="main_about" id="about">
        // контент
      </div>
    </section>

萨斯：

.open
    float:left
    transition: 0.6s
    width: 17px
    height: 100%
    background-color: #000
.main
    display: flex
    width: 100%
    height: 1680px
    &_projects
        transition: 0.6s
        padding: 53px 28px 32px 28px
        margin: 0
        width: 938px
        height: 100%
        background: #002535
    &_about
        padding-top: 115px
        width: 100%
        background: #fff
        display: flex
        flex-direction: column
        align-items: center
        
.rotate
    transform: translateX(-1000px)
    width: 0
    transition: 0.6s

js：

document.getElementById("open").onclick = function () {
  document.getElementById("projects").classList.toggle("rotate");
};
javascript

1 个回答

  1. Best Answer

    所以？？我还没接触过js，只接触过css

    const open = document.querySelector('.open')
const mainProjects = document.querySelector('.main_projects')

open.addEventListener('click',e => {
  mainProjects.classList.toggle('rotate')
})
    body{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}
.open {
        position: relative;
    transition: 0.6s;
    min-width: 17px;
    height: 100%;
        background-color: #000;
        z-index: 2;
}

.main {
    display: flex;
    width: 400px;
        height: 1680px;
        border: 1px solid red;
}

.main_projects {
    transition: 0.6s;
    margin: 0;
    width: 100%;
    height: 100%;
    background: #002535;
}

.main_about {
    padding-top: 115px;
        width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rotate {
    transform: translateX(-1000px);
    width: 0;
    transition: 0.6s;
}
        <section class="main">
<div class="open" id="open"></div>
      <div class="main_projects" id="projects">
        // контент
      </div>
      <div class="main_about" id="about">
        // контент
      </div>
    </section>

    • 1

相关问题