Форум

Дмитрий123 · #1 (**permalink**) 04.02.2016, 15:49

Добрый день, помогите пож!
Есть код https://jsfiddle.net/f19mt22m. Грубо говоря, нужно сделать слайдер блоков, при появлении блоков использовать класс bounceInLeft при переходе на другой блок (кликом на любую иную ссылку) менять класс в предыдущем на bounceOutRight. Надеюсь объяснил доходчиво.

В общем по ссылке сделана анимация в которой блок появляется по силке [#home], нужно сделать что б при клику на иную силку [#play || #service || #blog || #contact] блок [#home] красиво уходил, и потом появлялся соответствующий следующий блок.

Пробовал по всякому, но я так понимаю что ни одна моя идея была не верная.
Анимация взята из animate.css

За ранние спасибо за подсказку.

рони · #2 (**permalink**) 04.02.2016, 19:06

Дмитрий123,

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
  body{
    overflow: hidden;
  }

    .info{
        background-color: #ffffff;
        max-width: 100%;
		min-width:250px;
        margin: none;
        text-align: center;
        height: auto;
        box-shadow: 0px 0px 1px #2e2e2e, 0px 0px 7px #5d5c5c;
        border-radius: 5px;
        display: flex;
        flex-direction: column; flex-wrap: wrap;
    }

/* Nav block*/

#home, #play, #service, #blog, #contact {
     display: table;
      position: absolute;
}



.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}




@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}


@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
  </style>

  <title></title>


  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function() {
    $(".nav a").on("click", function(event) {
        event.preventDefault();
        temp && temp.removeClass("bounceInLeft").addClass("bounceOutRight");
        temp = $(this).attr("href");
        temp = $(temp)
    });
    var temp = $(".animated").on("webkitAnimationEnd animationend", function() {
        temp && temp.removeClass("bounceOutRight").addClass("bounceInLeft")
    }).eq(0)
});
  </script>
</head>

<body>
  <body>
<div id="menu">
      <ul class="nav">
        <li><a href="#home" id="home_click">Home</a></li>
        <li><a href="#play" >Play</a></li>
        <li><a href="#service" >Service</a></li>
        <li><a href="#blog" >Blog</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <div class="info animated bounceInLeft" id="home" >Home</div>
    <div class="info animated bounceOutRight" id="play" >Play</div>
    <div class="info animated bounceOutRight" id="service" >Service</div>
    <div class="info animated bounceOutRight" id="blog" >Blog</div>
    <div class="info animated bounceOutRight" id="contact" >Contact</div>
 </body>

</body>

</html>

Дмитрий123 · #3 (**permalink**) 04.02.2016, 22:28

Спасибо большое, рони!

Форум

Справочник

Discord чат

Курсы javascript