javascript - 将 CSS Transition 与点击事件联系起来

Question

我有下面的代码。当你点击 div 时，它会创建向左折叠的效果......你可以在这里看到它 => fiddle

我想将这种效果与我用来前后移动幻灯片的箭头联系起来。

类似于:

• 向左箭头将移动到向左滑动并触发 div 上的过渡向右折叠

• 右箭头则相反

这是我的箭头

  <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>

还有我当前div效果的CSS

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);
}

更新:

虽然我很接近但没有布埃诺

我尝试使用 addClass 函数附加“transit”类

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

它可以工作，但是幻灯片转到下一张太快以至于你看不到过渡，当你回来时 div 卡在过渡中。

Answer 1

使用 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');
});