通过动画向左让div消失

Question

我想做的是用户可以通过div交换。这是我的HTML：

<article id="realize" class="realizeBox">
    <div class="shown">
        <div class="heading">
            <h2>Realisations: <span>AGFA</span></h2>
        </div>
        <div class="centering">
            <aside class="left">
                <p>Maecenas laoreet est bibendum, dictum mi vel, cursus mi. Curabitur feugiat libero vitae lorem venenatis consequat. Donec luctus nisi cursus miet sapien blandit, quis congue massa tincidunt.</p>
            </aside>
            <aside class="right">
                <p>Maecenas laoreet est bibendum, dictum mi vel, cursus mi. Curabitur feugiat libero vitae lorem venenatis consequat. Donec luctus nisi cursus miet sapien blandit, quis congue massa tincidunt.</p>
            </aside>
            <div class="clear"></div>
        </div>
        <div class="button">
            <div class="centering"> <a href="#" class="next"></a> <a href="#" class="prv"></a> </div>
        </div>
    </div>
    <div class="notshown">
        <div class="heading">
            <h2>Realisations: <span>TEST</span></h2>
        </div>
        <div class="centering">
            <aside class="left">
                <p>Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
            </aside>
            <aside class="right">
                <p>Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
            </aside>
            <div class="clear"></div>
        </div>
        <div class="button">
            <div class="centering"> <a href="#" class="next"></a> <a href="#" class="prv"></a> </div>
        </div>
    </div>
</article>

正如您所看到的，我的文章中有多个div。显示第一个div。第二个（以及之后的3d，第4个......）的类notshown具有css display:none;。

每个div我也有2个按钮：

<a href="#" class="next"></a> 
<a href="#" class="prv"></a>

这是链接到它的javascript：

$('.next').click(function(e){
    e.preventDefault();
    if($('.realizeBox .shown').next().length > 0)
    {
        $('.realizeBox .shown').removeClass('shown').addClass('notshown').next().addClass('shown').removeClass('notshown');
    }
});

$('.prv').click(function(e){
    e.preventDefault();
    if($('.realizeBox .shown').prev().length > 0)
    {
        $('.realizeBox .shown').removeClass('shown').addClass('notshown').prev().addClass('shown').removeClass('notshown');
    }
});

当点击下一个时，我检查是否有下一个div。如果是，那么我将课程notshown添加到当前div ，下一个div 获取课程shown，课程notshown是的移除

现在这真的很无聊，只是显示和隐藏div。如何创建一个效果，当我点击下一个和上一个时，div左右动画。

我试图通过动画做到这一点，但没有成功。我在javascript上非常糟糕，所以我真的不知道如何做到这一点。有人能帮助我吗？

Answer 1

您可以使用css转换来实现此目的。

让我们假设（因为你没有添加它）notshown和shown类的css是

.shown{
  opacity:1;
}

.notshown{
  opacity:0;
}

您可以通过添加

轻松地将其设置为动画

#realizeBox > div{
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  /* trigger GPU rather than CPU for animations just for the lulz */

  transition: opacity 200ms linear;
}

Answer 2

如果你愿意，你可以拒绝这个答案，但是从头开始制作旋转木马相当繁琐，特别是当这个问题的许多解决方案已经编码并且你可以修改时。以下是您正在寻找的几个例子：http://bxslider.com/examples/carousel-demystified

$(document).ready(function(){
  $('.slider1').bxSlider({
    slideWidth: 200,
    minSlides: 2,
    maxSlides: 3,
    slideMargin: 10
  });
});

<div class="slider1">
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
</div>

希望这有帮助！

Answer 3

要执行此操作的css代码

@-webkit-keyframes disappear {
    from{transform: translate(0,0);}
    to{transform: translate(-100%,0);}
}
@keyframes disappear{
    from{transform: translate(0,0);}
    to{transform: translate(-100%,0);}
}    
.notshown{
    animation: disappear 2s;
    -webkit-animation: disappear 2s;
}

这会在类加入时影响div

完成后，它将回到它的位置

如果你使用display:none，你就不会看到影响（它会隐藏起来）

所以方法是从css中删除display:none并使用setTimeout，延迟时间等于与animation一起使用的时间，以延迟div的隐藏直到动画完成

这整个代码（使用chrome＆amp; firefox＆amp; IE 11测试）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $(".notshown").css('display','none');
        $('.next').click(function(e){
            e.preventDefault();
            if($('.realizeBox .shown').next().length > 0)
            {
                $('.realizeBox .shown').removeClass('shown').addClass('notshown').next().addClass('shown').removeClass('notshown');
                setTimeout(function(){
                    $(".shown").css('display','');
                    $(".notshown").css('display','none');
                },2000);
            }
        });

        $('.prv').click(function(e){
            e.preventDefault();
            if($('.realizeBox .shown').prev().length > 0)
            {
                $('.realizeBox .shown').removeClass('shown').addClass('notshown').prev().addClass('shown').removeClass('notshown');
            }
        });
    });
</script>
<style>
    @-webkit-keyframes disappear {
        from{transform: translate(0,0);}
        to{transform: translate(-100%,0);}
    }
    @keyframes disappear{
        from{transform: translate(0,0);}
        to{transform: translate(-100%,0);}
    }
    .notshown{
        animation: disappear 2s;
        -webkit-animation: disappear 2s;
    }

</style>
<a href="#" class="next">next</a><br/>
<a href="#" class="prv">prv</a>
<article id="realize" class="realizeBox">
    <div class="shown">
        <div class="heading">
            <h2>Realisations: <span>AGFA</span></h2>
        </div>
        <div class="centering">
            <aside class="left">
                <p>Maecenas laoreet est bibendum, dictum mi vel, cursus mi. Curabitur feugiat libero vitae lorem venenatis consequat. Donec luctus nisi cursus miet sapien blandit, quis congue massa tincidunt.</p>
            </aside>
            <aside class="right">
                <p>Maecenas laoreet est bibendum, dictum mi vel, cursus mi. Curabitur feugiat libero vitae lorem venenatis consequat. Donec luctus nisi cursus miet sapien blandit, quis congue massa tincidunt.</p>
            </aside>
            <div class="clear"></div>
        </div>
        <div class="button">
            <div class="centering"> <a href="#" class="next"></a> <a href="#" class="prv"></a> </div>
        </div>
    </div>
    <div class="notshown">
        <div class="heading">
            <h2>Realisations: <span>TEST</span></h2>
        </div>
        <div class="centering">
            <aside class="left">
                <p>Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
            </aside>
            <aside class="right">
                <p>Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
            </aside>
            <div class="clear"></div>
        </div>
        <div class="button">
            <div class="centering"> <a href="#" class="next"></a> <a href="#" class="prv"></a> </div>
        </div>
    </div>
</article>