Css альтернатива скольжения вниз с использованием transform: scale - PullRequest
Новая
       6

Css альтернатива скольжения вниз с использованием transform: scale

0 голосов
/ 27 ноября 2018

Анимации типа SlideDown очень полезны, чтобы показать пользователю, что меняется в макете.Раньше я делал это с JQuery, но у меня есть решение только на CSS.

Если элемент позиционирован абсолютно, все отлично с использованием transform: scale.Но можно сделать то же самое, когда элемент занимает пространство и должен перемещать вещи?

Я не против, чтобы он занимал пространство за один большой шаг - пока анимация показывает какой-то вид направление для следования за глазом.

Есть обходной путь с max-height - как здесь: https://stackoverflow.com/a/8331169/647845, но мне не нравится, что у меня есть оцените высоту, в противном случае анимация выглядит неуклюжей, или вы пропускаете контент.

Я прекрасно подхожу для использования transform: scale и прыжка в других элементах.В сочетании с display: block это не работает, хотя.Я ищу анимацию вверх и вниз.

Есть ли (простая) альтернатива?

В заключение я ищу альтернативу анимации задержки display: none/block. 

.lolcat
{
    transition: transform 200ms ease-in-out;
    transform: scale(1,0);
    transform-origin: 0 0;
    display: none;
}

.lolcat.expanded
{
    transform: scale(1,1);
    display: block; /* I wish you'd be delayable */
}

1 Ответ

0 голосов
/ 28 ноября 2018

Вы можете использовать margin-top свойство и анимационное меню.

См. Фрагмент ниже: 

#lolcat-container{
  overflow:hidden;
}

.lolcat
{
    border:1px solid black;
    background:red;
    color:white;
    margin-top:-100%;
    animation-direction: reverse;
    animation:1s 1 alternate forwards close;
}

#menu:hover .lolcat
{
    animation:1s 1 alternate forwards open;
}

@keyframes open {
  0% {
    margin-top:-100%;
  }
  100% {
    margin-top:0%;
  }
}

@keyframes close {
  0% {
    margin-top:0%;
  }
  100% {
    margin-top:-100%;
  }
}
<div id="menu">
    <a>hover me</a>
    <div id="lolcat-container">
      <ul class="lolcat">
          <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
      </ul>
    </div>
    <div>
      Content
    </div>
</div>

Вы также можете проверить это здесь

...