CSS3平滑全宽

Question

我有两个显示块：内联和浮动：左边，都有50％宽度，块中有自举行，有2个50％宽度块。 在块1中单击按钮后，需要平滑添加100％宽度并使用动画向右隐藏块2，然后反转。

我陷入了反向，我陷入了逆向动画，容器内的一些块正在跳跃。在线示例：http://asb.digitello.agency/

我的HTML：

<div id="fullpages">
        <div id="fullpage-left">
            <div class="carousel">
                <div class="sections" style="background: url(images/slide-left-1.jpg);">
                    <div class="row">
                        <div class="col-xs-12">
                            <h5 class="section-title">ÖZÜNÜZ</h5>
                        </div>
                    </div>
                </div>
                <div class="sections" style="background: url(images/slide-left-2.jpg);">

                </div>
                <div class="sections" style="background: url(images/slide-left-3.jpg);">

                </div>
            </div>
            <div class='icon-scroll'></div>
        </div>
        <div id="fullpage-right">
            <div class="carousel">
                <div class="sections" style="background: url(images/slide-right-1.jpg);">
                    <div class="row">
                        <div class="col-xs-12">
                            <h5 class="section-title">İŞİNİZ</h5>
                        </div>
                    </div>
                </div>
                <div class="sections" style="background: url(images/slide-right-2.jpg);">

                </div>
                <div class="sections" style="background: url(images/slide-right-3.jpg);">

                </div>
            </div>
            <div class='icon-scroll'></div>
        </div>
    </div>

CSS：

#fullpage-right, #fullpage-left {
    display:inline-block;
    float:left;
    height: 100vh;
    width: 50%;
    position:relative;
    overflow: hidden;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -ms-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}
#fullpage-right .sections, #fullpage-left .sections {
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
     background-size: cover!important;
    background-repeat: no-repeat!important;
    height: 100vh;
    -webkit-transition: width 0.5s, height 0.5s ease-in-out;
    -moz-transition: width 0.5s, height 0.5s ease-in-out;
    -ms-transition: width 0.5s, height 0.5s ease-in-out;
    -o-transition: width 0.5s, height 0.5s ease-in-out;
    transition: width 0.5s, height 0.5s ease-in-out;
}
#fullpage-left .sections {
    background-position: left center!important;
}
#fullpage-right .sections {
    background-position: right center!important;
}
.active-full {
    width:100vw!important;
    height:100vh!important;
}
.full-hidden {
    width:0%!important;
}
#fullpage-left.active-full .col-xs-12 {
    -webkit-transition: width 0.5s, height 0.5s ease-in-out;
    -moz-transition: width 0.5s, height 0.5s ease-in-out;
    -ms-transition: width 0.5s, height 0.5s ease-in-out;
    -o-transition: width 0.5s, height 0.5s ease-in-out;
    transition: width 0.5s, height 0.5s ease-in-out;
}
#fullpage-left.active-full .sections, #fullpage-right.active-full .sections {
    width:100vw!important;
    height:100vh!important;
}
#fullpage-left.active-full .col-xs-12, #fullpage-right.active-full .col-xs-12 {
    width:50%;
}
#fullpage-left.active-full .icon-scroll, #fullpage-left.active-full .icon-scroll:before, #fullpage-right.active-full .icon-scroll, #fullpage-right.active-full .icon-scroll:before {
    bottom: 80px;
}

点击触发器的Jquery：

fullpage_right_clicked = 1
    $('#fullpage-left .section-title').click(function(){
        if(fullpage_right_clicked)
        {
            $('#fullpage-left').toggleClass('active-full');
            function display() {
              $('#fullpage-left .section-content').toggleClass('hidden');
            }
            setTimeout(display, 600);
            $('#fullpage-right').toggleClass('full-hidden');
            fullpage_right_clicked = 0;
        }
            else
        {
            $('#fullpage-left').toggleClass('active-full');
            $('#fullpage-left .section-content').toggleClass('hidden');
            $('#fullpage-right').toggleClass('full-hidden');
            fullpage_right_clicked = 1;
        }
    });