CSS3 анимация Плъзнете div форма отдясно наляво При щракване върху бутон

Опитвам се да плъзна div отдясно наляво при щракване. И го затворете, плъзнете го отново надясно при щракване върху бутона за затваряне Използвайки CSS3 преход и анимация.

Ето връзката към fiddle: Щракнете тук

Примерен 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 dismiss & @keyframes selected) на (@keyframes slide-in и @keyframes slide-out)

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

person Emad Emami    schedule 23.11.2017
comment
Страхотно, лошо :( Така че сега работи. Но се плъзга отляво надясно. Как да го накарам да се плъзга отдясно наляво. Премахване на преходни стойности? - person Veer; 23.11.2017
comment
@Veer фрагмент за плащане е добавен към отговор - person Emad Emami; 23.11.2017
comment
Една забележка тук: по-добре е да напишете 0%, за да избегнете евентуални оплаквания от линтери и редактор. - person Arsen Khachaturyan; 05.05.2019