CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Marrento
Marrento

Reputation: 329

Tie CSS Transition with an on click event

I have the code bellow. And it creates the folding to the left effect when you click on the div... you can see it here => fiddle

I would like to tie that effect to the arrows that I use to to move the slides back and forth.

Something like:

here are my arrows

  <nav class="slides-navigation">
    <a class="next" href="#">
      <i class="fa fa-arrow-circle-o-right fa-5x"></i>
    </a>
    <a class="prev" href="#">
      <i class="fa fa-arrow-circle-o-left fa-5x"></i>
    </a>
  </nav>

and my CSS for the current div effect

body {
perspective: 4000px; /* You should also add vendor prefixes */
-webkit-perspective: 4000px;
}

.transit {
  transition: transform 1s;
  transform-origin: left;
  -webkit-transition: -webkit-transform 1s;
  -webkit-transform-origin: left;
}

.transit:active {
  transform: rotateY(90deg);
  -webkit-transform: rotateY(90deg);
}

Update:

I though I was close but no bueno

I tried to attach the "transit" class using an addClass function

$(".next").click( function() { 
  $("#slide").addClass("transit")
 });

It works but the slide goes to the next so fast that you can't see the transition and when you come back the div is stuck in the transition.

Upvotes: 1

Views: 2690

Answers (1)

Littm
Littm

Reputation: 4947

Using jQuery: JSFiddle

CSS:

body {
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
div.transit {
    background-color: #ccc;
    width: 300px;
    transition: transform 1s;
    transform-origin: left;
    -webkit-transition: -webkit-transform 1s;
    -webkit-transform-origin: left;
}

/* Link the transition effect to a class that we will name active */
div.transit.active {
    transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
}

HTML:

<div class="left-Slide">
    <div class="transit">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat lectus in lectus posuere, et tempus nunc euismod. Vivamus ut velit malesuada, dictum lectus vitae, fringilla risus. Nam facilisis magna eget quam imperdiet placerat non non nunc. Etiam eget lacus sem. Donec a neque tempor, cursus sem quis, porttitor elit. In in diam volutpat, pharetra ipsum lobortis, aliquet purus. Praesent odio risus, feugiat eget quam et, placerat interdum quam.

    </div>
</div>

<!-- YOUR ARROWS -->
<nav class="slides-navigation">
    <a class="next" href="#">
        <i class="fa fa-arrow-circle-o-right fa-5x"></i>
    </a>
    <a class="prev" href="#">
        <i class="fa fa-arrow-circle-o-left fa-5x"></i>
    </a>
</nav>

JS:

// Linking the CSS effect to your arrows
$('a.next').click(function() {
    $('div.transit').addClass('active');
});

$('a.prev').click(function() {
    $('div.transit').removeClass('active');
});

Upvotes: 1

Related Questions