2

我一直在尝试transition-delay从“状态A”移动到“状态B”时使用a，但在返回状态A时没有延迟。这是一个关于CSS规范是否说转换设置的一般问题应该是过渡开始时的那些或正在过渡到的状态的那些。这是一个例子：

.menu {
    transform: translateX(0%);
    transition: transform 1s ease-out;
}

.menu.is-open{
    transform: translateX(100%);
    transition: transform 5s ease-out;
}

开场动画应该是 1 秒还是 5 秒？

我的代码稍微复杂一些，因为它使用了延迟，但基本上可以归结为这一点。

.menu {
    transform: translateX(0%);
    transition: transform 0.5s ease-out 0;
}

.menu.is-open {
    transform: translateX(100%);
    transition: transform 0.5s ease-out 0.5s;
}

当我在 Chrome 或 Firefox 中尝试此操作时，打开菜单时出现延迟，关闭菜单时没有延迟，但在 IE11/Edge 中，它的行为就像没有设置延迟一样。所以我不确定这是否是浏览器错误，或者我是否误解了转换的工作原理，因此我对使用哪些转换提出了更一般的问题。

4

2 回答 2

1

应该是transition: transform而不是transition: translate 过渡规则接受 CSS 属性而不是值

尝试颠倒顺序，以便.menu获得半秒延迟

.menu{
    transform: translateX(0%);
    transition: transform 0.5s 0.5s ease-out;
}

.menu.is-open{
    transform: translateX(100%);
    transition: transform 0.5s 0s ease-out;
}

至于不在 IE 中工作，请参阅供应商前缀transition和transform

于 2016-01-30T19:31:01.993 回答
1

似乎您正确理解了如何transition工作。查看我的代码片段：

JSFiddle

.hoverable {
    height: 50px;
    background-color: yellow;
}

.moving {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: transform 1s linear 0s;
    transition: -ms-transform 1s linear 0s;
    transition: transform 1s linear 0s;
}

.hoverable:hover + .moving {
    -webkit-transform: translateX(200%);
    -ms-transform: translateX(200%);
    transform: translateX(200%);
    -webkit-transition: transform 0.5s linear 0.5s;
    transition: -ms-transform 0.5s linear 0.5s;
    transition: transform 0.5s linear 0.5s;
}
<div class="hoverable">Hover me</div>
<div class="moving">I can move</div>

在某些情况下，也许对您transition-timing-function: ease-out来说似乎是延迟transition-timing-function: linear，所以我在示例中使用了以恒定速度显示过渡。

红色块从到0%延迟200%移动。并毫不拖延地从到移动。工作原理没有任何魔力。0.5s0.5s200%0%1stransition

于 2016-01-30T20:04:10.167 回答