Плавное появление без JS\jQuery

453

25 декабря 2016, 19:08

Вопрос следующий, возможно ли плавное появление блока dropdown без использования JS jQuery и т.п.? Если да то как? transition не срабатывал...

.menu:focus ~ .dropdown{ 
display: block; 
} 
 
.main-head .dropdown{ 
position: absolute; 
margin-top: 85px; 
right: 210px; 
display: none; 
}

<header class="main-head">       
    <div id="logo"> 
        <p>Smart</p> 
    </div> 
    <button class="button menu">Кнопка</button> 
    <ul class="dropdown"> 
        <li> 
            <a href="">Menu1</a> 
        </li> 
        <li> 
            <a href="">Menu2</a> 
        </li> 
        <li> 
            <a href="">Menu3</a> 
        </li> 
        <li> 
            <a href="">Menu4</a> 
        </li> 
    </ul> 
</header>

Answer 1

transition не применим к свойству display: none | block; !

Вариант 1 opacity:

.menu:focus ~ .dropdown{ 
  opacity: 1; 
} 
 
.main-head .dropdown{ 
position: absolute; 
margin-top: 85px; 
right: 210px; 
opacity: 0; 
   
  transition: all .5s ease-in-out; 
}

<header class="main-head">       
    <div id="logo"> 
        <p>Smart</p> 
    </div> 
    <button class="button menu">Кнопка</button> 
    <ul class="dropdown"> 
        <li> 
            <a href="">Menu1</a> 
        </li> 
        <li> 
            <a href="">Menu2</a> 
        </li> 
        <li> 
            <a href="">Menu3</a> 
        </li> 
        <li> 
            <a href="">Menu4</a> 
        </li> 
    </ul> 
</header>

Вариант 2 scale:

.menu:focus ~ .dropdown{ 
 transform: scale(1); 
} 
 
.main-head .dropdown{ 
position: absolute; 
margin-top: 85px; 
right: 210px; 
 
  transform: scale(0); 
   
  transition: all .3s ease-in-out; 
}

<header class="main-head">       
    <div id="logo"> 
        <p>Smart</p> 
    </div> 
    <button class="button menu">Кнопка</button> 
    <ul class="dropdown"> 
        <li> 
            <a href="">Menu1</a> 
        </li> 
        <li> 
            <a href="">Menu2</a> 
        </li> 
        <li> 
            <a href="">Menu3</a> 
        </li> 
        <li> 
            <a href="">Menu4</a> 
        </li> 
    </ul> 
</header>

Вариант 3 translateX:

.menu:focus ~ .dropdown{ 
 transform: translateX(0%); 
} 
 
.main-head .dropdown{ 
position: absolute; 
margin-top: 85px; 
right: 210px; 
 
  transform: translateX(-1000%); 
   
  transition: all .3s ease-in-out; 
}

<header class="main-head">       
    <div id="logo"> 
        <p>Smart</p> 
    </div> 
    <button class="button menu">Кнопка</button> 
    <ul class="dropdown"> 
        <li> 
            <a href="">Menu1</a> 
        </li> 
        <li> 
            <a href="">Menu2</a> 
        </li> 
        <li> 
            <a href="">Menu3</a> 
        </li> 
        <li> 
            <a href="">Menu4</a> 
        </li> 
    </ul> 
</header>

Вариант 4 translateY:

.menu:focus ~ .dropdown{ 
 transform: translateY(0%); 
} 
 
.main-head .dropdown{ 
position: absolute; 
margin-top: 85px; 
right: 210px; 
 
  transform: translateY(-1000%); 
   
  transition: all .3s ease-in-out; 
}

<header class="main-head">       
    <div id="logo"> 
        <p>Smart</p> 
    </div> 
    <button class="button menu">Кнопка</button> 
    <ul class="dropdown"> 
        <li> 
            <a href="">Menu1</a> 
        </li> 
        <li> 
            <a href="">Menu2</a> 
        </li> 
        <li> 
            <a href="">Menu3</a> 
        </li> 
        <li> 
            <a href="">Menu4</a> 
        </li> 
    </ul> 
</header>

Вариант с absolute:

body { 
  overflow: hidden; 
} 
 
.menu:focus ~ .dropdown{ 
  right: 210px; 
} 
 
.main-head .dropdown{ 
  position: absolute; 
  margin-top: 85px; 
  right: -9999px;   
  transition: all .5s ease-in-out; 
}

<header class="main-head">       
    <div id="logo"> 
        <p>Smart</p> 
    </div> 
    <button class="button menu">Кнопка</button> 
    <ul class="dropdown"> 
        <li> 
            <a href="">Menu1</a> 
        </li> 
        <li> 
            <a href="">Menu2</a> 
        </li> 
        <li> 
            <a href="">Menu3</a> 
        </li> 
        <li> 
            <a href="">Menu4</a> 
        </li> 
    </ul> 
</header>

Answer 2

.dropdown { 
  position: relative; 
  overflow: hidden; 
  margin-top: 85px; 
  height: 0px; 
  width: 100px; 
} 
@keyframes down1 { 
  0% { 
    height: 0; 
  } 
  10% { 
    height: 10; 
  } 
  25% { 
    height: 25px; 
  } 
  40% { 
    height: 40; 
  } 
  50% { 
    height: 50px; 
  } 
  60% { 
    height: 60; 
  } 
  75% { 
    height: 75px; 
  } 
  80% { 
    height: 80; 
  } 
  100% { 
    height: 100px; 
  } 
} 
 
.menu:focus ~ .dropdown { 
  outline: 1px solid #ccc; 
  animation-name: down1; 
  animation-duration: 1s; 
  animation-timing-function: ease-in; 
  height: 100px; 
}

<header class="main-head"> 
  <div id="logo"> 
    <p>Smart</p> 
  </div> 
  <button class="button menu">Кнопка</button> 
  <div class="dropdown"> 
    <div> 
      <a href="">Menu1</a> 
    </div> 
    <div> 
      <a href="">Menu2</a> 
    </div> 
    <div> 
      <a href="">Menu3</a> 
    </div> 
    <div> 
      <a href="">Menu4</a> 
    </div> 
  </div> 
</header>