0

I dont want all button to show at once, i should be like drop down transition. I want each button to show 1 by 1, by expanding the main div and inside button should showed in a expanding transition. I tried many thing but can't get it to work any css expers whelp

var t = document.getElementsByClassName('temp')
const arr = [...t]

document.getElementById('main').onmouseover = () => {
  arr.forEach((a) => {
    a.style.display = 'inline';
  })
}
document.getElementById('main').onmouseout = () => {
  arr.forEach((a) => {
    a.style.display = 'none';
  })
}


// t.onmouseover = () =>{
//   console.log('hi')
//   // document.getElementsByClassName('temp')
// }
/* *{
    background-color  : black;
  } */

#main:hover {
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  /* color    : #fff; */
  transform: translateY(-7px);
  transition: all 0.5s;
  /* display  : block; */
  /* position : absolute; */
}

.temp {
  display: none;
  position: relative;
}

#main {
  background-color: #2EE59D;
}
<div id="main">
  <button id='button'>hello</button>
  <button class='temp'>button 1</button>
  <button class='temp'>button 2</button>
  <button class='temp'>button 3</button>
  <button class='temp'>button 4</button>
  <button class='temp'>button 5</button>
</div>

this only show the button directed not like i expect

biberman
  • 5,606
  • 4
  • 11
  • 35
Rohit Majnekar
  • 3
  • 2

1 Answers1

1

You can't transition display properties with css, but you could use opacity like this:

.temp {
    opacity: 0;
    position: relative;
    transition: all 0.5s;
}

#main {
    background-color: #2EE59D;
    transition: all 0.5s;
}

#main:hover{
    box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
    transform: translateY(-7px);
}

#main:hover .temp {
    opacity: 1;
}
<body>
    <div id="main">
        <button id='button'>hello</button>
        <button class='temp'>button 1</button>
        <button class='temp'>button 2</button>
        <button class='temp'>button 3</button>
        <button class='temp'>button 4</button>
        <button class='temp'>button 5</button>
    </div>
</body>
dantheman
  • 3,189
  • 2
  • 10
  • 18
  • This is not what i want, why do you close it :(.....can you read my question again i have updated it – Rohit Majnekar Jun 11 '21 at 08:42
  • He didn't close the question. But it's correct: You can't use transition for the display property. You could play arround with `max-width` and `opacity` or `visability` to have the one by one effect... – biberman Jun 23 '21 at 14:57