代码之家 › 专栏 › 技术社区 › Tom M

在Chrome中关闭两个独立元素的CSS转换时间

css-transitions google-chrome css

Tom M · 技术社区 · 8 年前

如何在Chrome中修复这个时间问题?在firefox中,结束动画进行得很顺利,但在chrome中,这两个元素是关闭的。我不能将元素放在一个容器中进行转换。

请注意画布外和幻灯片中按钮之间的白色边框。他们有点不太对劲。

$(document).ready(函数()。{
变量offcanvasWidget={
选项:{
id:'offcanvasWidget',
触发器:$('[data offcanvas trigger]'),
关闭:$('[数据关闭画布关闭])
}

init:函数()。{
this.addListeners();
}
addListeners:函数()。{
var=这个;
this.options.trigger.on('单击',函数(事件){
event.preventDefault();
那个.toggleOffCanvas();
(});
}
ToggleOffCanvas:函数()。{
$('body').toggleClass('offCanvas-show');
}
};
offcanvasWidget.init();
});.trigger{
转换:转换。7秒轻松;
显示:内联块;
转换:旋转3D(0,0,1,-90度)透视(1px)比例(1.001);
位置:固定;
右:-22px;
顶部:30vh;
}

.offCanvas显示.trigger{
转换:translatex(-218px)旋转3d(0,0,1,-90度)透视(1px)比例(1.001);
}

.画布外{
转换:translatex(100%);
位置:固定;
转换:转换。7秒轻松;
顶部:0;
右:0;
底部:0;
左:自动;
宽度:200px;
}
.offcanvas显示.offcanvas{
转换:translatex(0);
}

.trigger,.offCanvas{
背景色:黑色;
颜色:白色;
填料:10px;
}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>

<a href=“”class=“trigger”画布数据触发器>跟随我们</a>
<DIV class=“offCanvas”>

</DIV>>=


    
     < / div在一个容器中进行转换。
     
     
     
      
       
      
     
     
     
     
      请注意画布外和幻灯片中按钮之间的白色边框。他们有点不对劲。
     
     
     
     
      
       $(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>

1 回复 | 直到 8 年前

Andyweb 8 年前

为什么不把“tab”元素再宽一点,这样它就可以“深入”托盘,这样就不会注意到任何间隙:)