Показать и скрыть с помощью CSS-анимации в компоненте - PullRequest
Новая
       6

Показать и скрыть с помощью CSS-анимации в компоненте

0 голосов
/ 17 января 2019

Я создал угловую боковую панель. Я пытаюсь показать и скрыть ее с помощью CSS-анимации. Онлайн-пример :

Компонент боковой панели полагается на службу, которая знает, когда скрывать и отображать: 

<div id="sidebar" [ngClass]="{'hide': sidebarService.hidden, 'show': !sidebarService.hidden}">

  <button type="button" (click)="sidebarService.toggle()">
    Close Sidebar
  </button>

  <nav>
    <ul>
      <li>
        <a href="#">Page 3</a>
      </li>
      <li>
        <a href="#">Page 4</a>
      </li>
    </ul>
  </nav>

</div>

Я использую следующий код CSS: 

@keyframes show {
  from {left: -100%;}
  to {left: 0;}
}

@keyframes hide {
  from {left: 0;}
  to {left: -100%;}
}

#sidebar {
  background-color: #e0e0e0;
  border: 1px solid red;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;   
  left: -100%;
  right: 0;
  bottom: 0;     
  width: 100%;
}

.hide {
  animation-name: hide;
  animation-duration: 1s;
}

.show {
  animation-name: show;
  animation-duration: 1s;
}

Я обнаружил 2 проблемы:

1 - боковая панель изначально видна и закрывается толькопосле;

2 - при нажатии открывается боковая панель, но после ее завершения она исчезает.

Я не уверен, что мне здесь не хватает ...

Ответы [ 3 ]

0 голосов
/ 17 января 2019

Проблема в том, где вы определяете left: -100% в вашем CSS-файле.

Я предлагаю сделать это, поместив left: -100% в класс .hide, а не прямо в контейнер. 

#sidebar {
  background-color: #e0e0e0;
  border: 1px solid red;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;   
  /*left: -100%;*/
  right: 0;
  bottom: 0;     
  width: 100%;

}

.hide {
  animation-name: hide;
  animation-duration: 1s;
  left:-100%;
}

.show {
  animation-name: show;
  animation-duration: 1s;

}
0 голосов
/ 17 января 2019

Проблема в том, что вы устанавливаете скрытие анимации ключевых кадров, в котором вы устанавливаете from : 0% и to: -100%. Это означает, что анимация начинается с боковой панели в 0.

Таким образом, он идет от -100% (который вы установили по умолчанию на #sidebar), переходит в положение from 0% и затем переходит в положение to. Вот почему боковая панель появляется при загрузке.

Тогда анимация шоу снова скрывает боковую панель, потому что вы не установили animation-fill-mode, которое должно быть forwards. Если нет, то в конце любой анимации элемент возвращается в положение по умолчанию, которое вы установили на -100% на #sidebar. Так что опять прячется.

(в данном случае) Вы можете вообще пропустить анимацию и просто использовать переходы 

#sidebar {
  background-color: #e0e0e0;
  border: 1px solid red;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;   
  left: -100%;
  right: 0;
  bottom: 0;     
  width: 100%;
  transition: 1s;
}

#sidebar.hide {
  left: -100%;
}

#sidebar.show {
  left: 0;
}
0 голосов
/ 17 января 2019

Используйте CSS, как показано ниже:

установить left: -100%; в .hide вместо использования в #sidebar

Почему?

если вы установите left: -100%; в #sidebar после анимирования show, завершите left обратно к объявлению, как в #sidebar, и не останетесь, как вы установили в @keyframes

См. Рабочий код 

#sidebar {
  background-color: #e0e0e0;
  border: 1px solid red;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;   
  right: 0;
  bottom: 0;     
  width: 100%;
}

.hide {
  animation-name: hide;
  animation-duration: 1s;
  left: -100%;
}

.show {
  animation-name: show;
  animation-duration: 1s;

}
...