Смена класса по клику, слайдер блоков
Добрый день, помогите пож!
Есть код https://jsfiddle.net/f19mt22m. Грубо говоря, нужно сделать слайдер блоков, при появлении блоков использовать класс bounceInLeft при переходе на другой блок (кликом на любую иную ссылку) менять класс в предыдущем на bounceOutRight. Надеюсь объяснил доходчиво. В общем по ссылке сделана анимация в которой блок появляется по силке [#home], нужно сделать что б при клику на иную силку [#play || #service || #blog || #contact] блок [#home] красиво уходил, и потом появлялся соответствующий следующий блок. Пробовал по всякому, но я так понимаю что ни одна моя идея была не верная. Анимация взята из animate.css За ранние спасибо за подсказку. |
animationend и смена классов
Дмитрий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>
|
Спасибо большое, рони!
|
| Часовой пояс GMT +3, время: 00:59. |