Issue
I am trying to get my hamburger menu to work, but it doesn't (not as I want to anyway). The animation transition works upon clicking the button the first time around, but upon clicking it again, it does the same thing. It should animate like a reverse transition of the first for the upon clicking.
let a = document.getElementsByClassName("mobile1")[0];
document.querySelector(".button-one").addEventListener("click", () => {
a.classList.toggle("mobile2");
})
button {
background: transparent;
border: 3px #000 solid;
border-radius: 0.25rem;
position: absolute;
left: 20px;
top: 20px
}
.button-one {
align-items: center;
display: flex;
height: 21px;
width: 30px;
}
.mobile1 {
background-color: black;
height: 3px;
width: 100%
}
.mobile1 {
background-color: currentColor;
position: absolute;
left: 0;
top: 12px;
transition: top 250ms ease, transform 250ms ease 250ms;
transform-origin: center;
width: 100%
}
.mobile2 {
top: 0;
width: 100%;
}
.mobile2 {
transform: rotate(-45deg);
}
<button class="button-one">
<div class="mobile1"></div>
</button>
Any help is appreciated...
Solution
Need to update the transition
CSS property of the mobile1
class and add a transition
property for the mobile2
class since it should move reversely when the class is changed (user is clicked).
As an explanation;
- When the user clicks on it first time, move the line first and then transform it
- When the user clicks on it second time, transform the line first and then move it
let a = document.getElementsByClassName("mobile1")[0];
document.querySelector(".button-one").addEventListener("click", () => {
a.classList.toggle("mobile2");
})
button{
background: transparent;
border:3px #000 solid;
border-radius: 0.25rem;
position:absolute;
left: 20px;
top:20px
}
.button-one{
align-items: center;
display: flex;
height: 21px;
width: 30px;
}
.mobile1 {
background-color: black;
height: 3px;
width: 100%
}
.mobile1{
background-color: currentColor;
position:absolute;
left:0;
top:12px;
transition: transform 250ms ease, top 250ms ease 250ms; **
transform-origin: center;
width:100%
}
.mobile2 {
top:0;
width:100%;
}
.mobile2 {
transform:rotate(-45deg);
transition: top 250ms ease, transform 250ms ease 250ms; **
}
<button class="button-one">
<div class="mobile1">
</div>
</button>
Answered By - Onur Doğan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.