在Chrome中关闭两个单独元素的CSS过渡时间

Question

如何在Chrome中解决此计时问题？在Firefox中，关闭动画会顺利进行，但在chrome中，两个元素均会关闭。我无法将元素放在一个容器中进行过渡。

请注意关闭画布和幻灯片中的按钮之间的白色边框。他们有点过关。

$(document).ready(function () {
    var OffCanvasWidget = {
        options: {
            id: 'OffCanvasWidget',
            trigger: $('[data-offcanvas-trigger]'),
            close: $('[data-offcanvas-close]')
        },

        init: function () {
            this.addListeners();
        },
        addListeners: function () {
            var that = this;
            this.options.trigger.on('click', function (event) {
                event.preventDefault();
                that.toggleOffCanvas();
            });
        },
        toggleOffCanvas: function () {
            $('body').toggleClass('offcanvas-show');
        }
    };
    OffCanvasWidget.init();
});

.trigger {
    transition: transform .7s ease;
    display: inline-block;
    transform: rotate3d(0, 0, 1, -90deg) perspective(1px) scale(1.001);
    position: fixed;
    right: -22px;
    top: 30vh;
}

.offcanvas-show .trigger {
    transform: translateX(-218px) rotate3d(0, 0, 1, -90deg) perspective(1px) scale(1.001);
}

.offcanvas {
    transform: translateX(100%);
    position: fixed;
    transition: transform .7s ease;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 200px;
}
.offcanvas-show .offcanvas {
     transform: translateX(0);
}

.trigger, .offcanvas {
    background-color: black;
    color: white;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="trigger" data-offcanvas-trigger>Follow us</a>
<div class="offcanvas">
    
</div>

Answer 1

为什么不只是将'tab'元素放得更宽一点，以使它在托盘上足够“重叠”，以至于没有发现任何缝隙：）