Question

我有下面的代码。当你点击div时它会创建左侧效果的折叠...你可以在这里看到它=＆gt; 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);
}

更新

我虽然我很亲密，但没有bueno

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

使用单击事件绑定CSS Transition

1 个答案: