Анимация CSS3 Слайд-форма div справа налево По нажатию кнопки

Я пытаюсь сдвинуть div справа налево по щелчку. И закройте его, снова сдвиньте вправо, нажав кнопку закрытия, используя переход и анимацию CSS3.

Вот ссылка на скрипку: Нажмите здесь

Пример CSS:

.selected {
   animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.dismiss {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}

Может кто-нибудь объяснить мне, что я здесь делаю неправильно? и как это решить?

Спасибо


jquery css css-animations css-transitions
person Veer    schedule 23.11.2017    source источник

Ответы (1)


arrow_upward
7
arrow_downward 

$('#showFilePanel').click(function(event) {
  if ($('.notification-container').hasClass('dismiss')) {
    $('.notification-container').removeClass('dismiss').addClass('selected').show();
  }
  event.preventDefault();
});

$('#closeFilePanel').click(function(event) {
  if ($('.notification-container').hasClass('selected')) {
    $('.notification-container').removeClass('selected').addClass('dismiss');
  }
  event.preventDefault();
});
html,
body {
  overflow: hidden;
  max-width: 100%
}

.notification-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  display: none;
  height: 100%;
  overflow: hidden;
  background: #107b10;
  z-index: 999;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

.selected {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

.dismiss {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}

@-webkit-keyframes slide-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(100%);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="notification-container dismiss">
</div>

<a id="showFilePanel">Open</a>
<a id="closeFilePanel">Close</a>

Вы используете selected и dismiss вместо animation-name по ошибке. Измените имя анимации на реальное имя анимации, которое вы определили:

.selected {
   animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.dismiss {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
   0% { -webkit-transform: translateX(-100%); }
   100% { -webkit-transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
     0% {transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}

@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@-webkit-keyframes slide-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
}

замените (@keyframes отклонить и @keyframes selected) на (@keyframes выдвигается и @keyframes выдвигается >)

Редактировать: добавить фрагмент для открытия и закрытия с правой стороны.

person Emad Emami    schedule 23.11.2017
comment
Отлично, плохо :( Итак, теперь это работает. Но оно скользит слева направо. Как заставить его скользить по форме справа налево. Значения перехода Caning? - person Veer; 23.11.2017
comment
Фрагмент оформления заказа @Veer добавлен к ответу - person Emad Emami; 23.11.2017
comment
Одно замечание: лучше писать 0%, чтобы избежать возможных жалоб от линтеров и редактора. - person Arsen Khachaturyan; 05.05.2019