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

Quasipickle 发表于 Dev

准刺

当屏幕宽度小于768px时，我的网站的菜单将变为非画布菜单。然后，可以通过单击触发菜单，并translate使用CSS过渡来输入和输出菜单。

问题是当浏览器> 768px，然后将其大小调整为<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);
    }
}

dfsq

您可以尝试使用另外一个设置过渡的帮助器类来实现此目的：

#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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。