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

Question

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

Вы имели в виду

eval("\$arr = array('foo'=>'bar');"); 

var_dump($arr);

1

css angular angular6 angular7 css-animations

задан Miguel Moura 17 January 2019 в 12:01

3 ответа

Другие вопросы по тегам:

css angular angular6 angular7 css-animations

Похожие вопросы:

score 0 · Answer 1

Проблема в том, где вы определяете 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;

}

score 0 · Answer 2

Используйте 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;

}

score 0 · Answer 3

Проблема в том, что вы устанавливаете скрытие анимации ключевых кадров, в котором вы устанавливаете 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;
}