Question

当屏幕宽度<1时，我的网站菜单会更改为非画布菜单。 768px。然后可以通过单击触发菜单，并使用CSS转换translate进出。

问题是当浏览器是> 768px，然后调整大小为＆lt; 768px。菜单快速过渡而不是最初离开画布。

您可以在此处查看示例：http://codepen.io/anon/pen/RPoQzO（以下代码）

使预览部分非常宽，您将看到白色框填充宽度
缩小部分的大小，您会看到它滑出。我不希望这样 - 我只是希望它立即消失。
点击绿色区域，您将看到所需的过渡效果。 （这当然是一个卑鄙的代表，但它证明了这个问题）

我想用CSS解决这个问题（如果可能的话）。我不想添加Javascript侦听器来调整大小。我宁愿继续使用Javascript。

修改：这是代码：

<div id="menu">
  This is the menu
</div>

和CSS

body{
  background:green;
}
#menu{
  background:white;
}

@media(max-width:768px){
    #menu{
        transform:translateX(-100%);
        -webkit-transform:translateX(-100%);
        transition:transform 0.3s;
        -webkit-transition:-webkit-transform 0.3s;
    }

    #menu.in{
            transform:translateX(0);
            -webkit-transform:translateX(0);
    }
}

Answer 1

您可以尝试使用一个可设置转换的辅助类来实现此目的：

#menu {
  background:white;
}

@media (max-width: 768px) {
  #menu {
    transform:translateX(-100%);
    -webkit-transform:translateX(-100%);
  }
  #menu.clicked {
    transition: transform 0.3s;
    -webkit-transition:-webkit-transform 0.3s;
  }
  #menu.in {
    transform:translateX(0);
    -webkit-transform:translateX(0);
  }
}

和JS部分：

$(window).on('click',function() {
    $("#menu").toggleClass('in').addClass('clicked');
    setTimeout(function() {
        $("#menu").removeClass('clicked');
    }, 100);
});

请注意，您需要在一些短暂超时后删除帮助程序类，以便仅在单击时才转换，但在调整窗口大小时不会。

演示： http://codepen.io/anon/pen/aOBYYP

Answer 2

将transition:-webkit-transform 0.3s; transition:transform 0.3s;从媒体查询内移动到标准#menu似乎有效，如图所示：

由此：

#menu{
  background:white;
}

@media(max-width:768px){
    #menu{
        transform:translateX(-100%);
        -webkit-transform:translateX(-100%);
        transition:transform 0.3s;
        -webkit-transition:-webkit-transform 0.3s;
    }

    #menu.in{
            transform:translateX(0);
            -webkit-transform:translateX(0);
    }
}

对此：

#menu{
  background:white;
  transition:transform 0.3s;
  -webkit-transition:-webkit-transform 0.3s;
}

@media(max-width:768px){
    #menu{
        transform:translateX(-100%);
        -webkit-transform:translateX(-100%);
    }

    #menu.in{
            transform:translateX(0);
            -webkit-transform:translateX(0);
    }
}

这是因为当屏幕宽度超过768px时，没有应用过渡属性;所以它会突然跳跃而不是平稳地改变。

Answer 3

现在我更清楚地理解了这个问题，你可以试试这个：

<style>
body{
  background:green;
}
#menu{
  background:white;
  transform:translateX(-100%);
  -webkit-transform:translateX(-100%);
}
.out{
    transform:translateX(0%)!important;
    -webkit-   transform:translateX(-0%)!important;
}
@media(max-width:768px)
{
	#menu{	
  transition:transform 0.3s;
		-webkit-transition:-webkit-transform 0.3s;
  }
}
@media(min-width:786px)
{
  #menu{
    transform:translateX(0%);
    -webkit-   transform:translateX(-0%);
  }
}
</style>
<body onclick=" if(window.outerWidth < 786){document.querySelector('#menu') .classList.toggle('out');}">
<div id="menu">
  This is the menu
</div>
</body>

此方法不使用任何事件侦听器，并且它不在框架内（外部宽度不是它的宽度），它似乎可以工作。

如何在第一次停止运行CSS转换？

3 个答案: