Javascript 将CSS转换与单击事件绑定

我有下面的密码。当你点击div时，它会产生向左折叠的效果。。。您可以在这里看到=>

我想把这种效果与我用来来回移动幻灯片的箭头联系起来

比如：

• 左箭头将向左滑动，并触发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>

更新：

我以为我很接近，但不是布埃诺

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

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

它可以工作，但是幻灯片转到下一张幻灯片的速度太快，以至于您看不到转换，当您返回时，div被卡在转换中。

使用jQuery：

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

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

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

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

HTML:

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

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

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

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

---

JavaScript代码在哪里？作为点击事件的结果附加类。我正在使用superslides.js plugin=>我想将css附加到插件上的下一个和上一个行为。或者创造一种新的行为或者说。。。它正在产生效果，但是幻灯片过渡正在它上面发生，所以我看不到效果。您知道是否有办法保持幻灯片过渡直到效果结束吗？您可以尝试使用函数

setTimeout

延迟折叠效果：。在给定的示例中，添加了2秒延迟。您可以根据幻灯片转换所用的时间调整此延迟。试试看：）