通过向左动画使 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、4th、..）具有类 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 类添加到 current div 并且 next div 获得 shown 类和 notshown 类被 删除强>。

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

我尝试使用动画来做到这一点，但没有成功。我真的不擅长 javascript，所以我真的不知道该怎么做。有人可以帮我吗？

Answer 1

如果你愿意，你可以拒绝这个答案，但是从头开始制作轮播是相当乏味的，尤其是当这个问题有很多已经编码并且你可以修改的解决方案时。以下是您正在寻找的几个示例：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 2

这样做的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 & firefox & 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>

Answer 3

您可以使用 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;
}