javascript - 如何顺利更改我的div内容

我有一个分页，我想通过单击它来更改容器的内容。
它有效，但是我希望它能顺利进行。

<div id='container>
    <div id='0' class='box'></div>
    <div id='1' class='box'></div>
    <div id='2' class='box'></div>
</div>

风格：

 #container{'
    position:relative
 }

.box{
     position: absolute;
     display: none;
 }

.box:first-child{
    display: inline-block;
 }

通过单击我的分页按钮：

$(function () {
    var obj = $('#pagination').twbsPagination({
        totalPages: 3,
        visiblePages: 2,
        prev:'Prev',
        next:'Next',
        onPageClick: function (event, page) {
            console.info(page);
            page=page-1;
            $(".box").hide(function () {
                $("#"+page).show();
            });
        }
    });

我该如何顺利进行？

最佳答案

您有2个选择

以Jquery方式：-

使用fadeIn fadeOut代替show hide

$(".box").fadeOut("slow",function () {
  $("#"+page).fadeIn('slow');
});

以CSS方式：-

使用transition进行动画处理。但是在这种情况下，您只能在opacity和visibility而不是display的情况下平稳播放

  .box{
     position: absolute;
     opacity: 0;
     visibility:hidden;
     -webkit-transition: all 2s ease 0s;
     -moz-transition: all 2s ease 0s;
     -o-transition: all 2s ease 0s;
     -ms-transition: all 2s ease 0s;*/
     transition: all 2s ease 0s;
     }

关于javascript - 如何顺利更改我的div内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41025883/