javascript - Javascript切换幻灯片导航与淡入淡出

Question

点击花朵打开菜单。然后我创建了我想要的动作，菜单打开后“prosess”淡入。但我想在倒塌时扭转运动。这样“散文”就会在人们重新切换回来之前消失。任何人都可以帮助我解决这个问题吗？

function classOpen() {
    var spinn = document.getElementById("nav");

    spinn.classList.toggle('in');
    spinn.classList.toggle('out');
}

const delay = ms => new Promise(res => setTimeout(res, ms));
    const classFadeIn = async () => {

    var element1 = document.getElementById("text1");
    var element2 = document.getElementById("text2");
    var element3 = document.getElementById("text3");

    await delay(300);

    element1.classList.toggle("show");
    element2.classList.toggle("show");
    element3.classList.toggle("show");
}

    document.querySelector('#nav').addEventListener('click', classFadeIn);

:root{
  --seconds: 5s;
  --fast: 2s;
}

nav{
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10px;
  padding-top: 20px;
  width: 100%;
}

nav img{
  width: 50px;
}

/* INN OUT */

#nav{
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 50px;
    padding: 10px;
    background-color: white;
    margin-right: 20px;

    /*drop shadow*/
    -webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
    -moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);

}
.in {
    width: 50px;
}

.out {
    width: 400px;

}
.transition{
  -webkit-transition: all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out
    -o-transition:all 0.2s ease-in-out;
    transition::all 0.2s ease-in-out;
}


#navtext{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.style{
  display: flex;
  background-color: white;
  justify-content: center;
  align-items: center;
  padding: 10px 15px 10px 15px;
  border-radius: 40px;
  color: lightgrey;
  transition: 0.1s;

}
#text{
  display: none;
}
.noshow{
  display: none;
}
.show{
  display: flex;
}

.show:hover{
  color: black;
  background-color: lightgrey
}

<nav>
  <div id="nav" class="in transition">
    <img id="spinn" src="https://i.dlpng.com/static/png/762080_preview_preview.png" class="rotating spinn" onclick="classOpen()">
    <div id="navtext">
        <a id="text1" class="noshow style">Prosess</a>
        <a id="text2" class="noshow style">Prosess</a>
        <a id="text3" class="noshow style">Prosess</a>
    </div>
  </div>
</nav>

标签： javascripthtmlcss

Answer 1

我已经删除了用于显示/隐藏 Javascript 项目的部分并保持in/out切换。

然后，根据in/out类，我将通过 CSS 显示/隐藏项目：

.transition.in .noshow{
  visibility: hidden;
  opacity: 0;
  height:0;
}
.transition.out .noshow{
  visibility: visible;
  opacity: 1;
  height:auto;
  transition: 0.7s;
}

不使用的原因display: none || flex是为了保持transitionoin的效果。

这是完整的代码：

function classOpen() {
    var spinn = document.getElementById("nav");

    spinn.classList.toggle('in');
    spinn.classList.toggle('out');
}

document.querySelector('#nav').addEventListener('click', null);

:root{
  --seconds: 5s;
  --fast: 2s;
}

nav{
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10px;
  padding-top: 20px;
  width: 100%;
}

nav img{
  width: 50px;
}

/* INN OUT */

#nav{
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 50px;
    padding: 10px;
    background-color: white;
    margin-right: 20px;

    /*drop shadow*/
    -webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
    -moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);

}
.in {
    width: 50px;
}

.out {
    width: 400px;

}
.transition{
  -webkit-transition: all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out
    -o-transition:all 0.2s ease-in-out;
    transition::all 0.2s ease-in-out;
}


#navtext{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.style{
  display: flex;
  background-color: white;
  justify-content: center;
  align-items: center;
  padding: 10px 15px 10px 15px;
  border-radius: 40px;
  color: lightgrey;
  transition: 0.1s;

}
#text{
  display: none;
}
.transition.in .noshow{
  visibility: hidden;
  opacity: 0;
  height:0;
}
.transition.out .noshow{
  visibility: visible;
  opacity: 1;
  height:auto;
  transition: 0.7s;
}

.noshow:hover{
  color: black;
  background-color: lightgrey
}

<nav>
  <div id="nav" class="in transition">
    <img id="spinn" src="https://i.dlpng.com/static/png/762080_preview_preview.png" class="rotating spinn" onclick="classOpen()">
    <div id="navtext">
        <a id="text1" class="noshow style">Prosess</a>
        <a id="text2" class="noshow style">Prosess</a>
        <a id="text3" class="noshow style">Prosess</a>
    </div>
  </div>
</nav>