Слайд вниз / вверх анимация - PullRequest
Новая
       7

Слайд вниз / вверх анимация

0 голосов
/ 09 апреля 2019

В этом фрагменте, используя ключевые кадры и анимацию и отображая none / block, div оживляет скольжение при наведении. 

h1 { padding: 20px; }
div {
    width: 100%; background: pink; padding: 20px;
    
    display: none;
}

body:hover div {
    display: block;
    
    -webkit-animation: slide-down .3s ease-out;
    -moz-animation: slide-down .3s ease-out;
}

@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }   
    100% { opacity: 1; -moz-transform: translateY(0); }
}
<div>Hello</div>
<h1>Hover me</h1>

Как сделать так, чтобы он также скользил вверх при удалении парения?

1 Ответ

1 голос
/ 09 апреля 2019

Попробуйте применить свойство перехода к фактическому элементу: 

h1 { padding: 20px; }
div {
    position: absolute;
    width: 100%; background: pink; padding: 20px;  
    visibility: hidden;
    opacity: 0;
    transform: translateY(0);
    transition: all .3s ease-out;
}

body:hover div {
    visibility: visible;
    opacity: 1;
    transform: translateY(100%);
}
<div>Hello</div>
<h1>hover me</h1>
...