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

Question

当屏幕宽度小于 768 像素时，我网站的菜单变为关闭-canvas 菜单。然后可以通过单击触发菜单，并且使用 CSS 转换 translate 进出。

问题是当浏览器大于 768 像素时，然后将其调整为小于 768 像素。菜单很快就转出，而不是最初是关闭的-canvas.

你可以在这里看到一个例子：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

将媒体查询内部的 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 2

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

#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);
});

请注意，您需要在短暂的超时后删除助手 class，以便仅在单击时激活过渡，但在调整 window 大小时不会激活。

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

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>

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

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

How do I stop CSS transitions from running the first time?

css

css-transitions

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

How do I stop CSS transitions from running the first time?

css

css-transitions

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