Question

我从'＆＃34;状态A＆＃34;移动时尝试使用transition-delay到＆＃34;州B＆＃34;但是当回到状态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中，它的行为与没有延迟设置的情况相同。因此，我不确定这是否是一个浏览器错误，或者我是否误解了转换是如何工作的，因此我对使用哪些转换的问题更为笼统。

Answer 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和UICollectionView

Answer 2

似乎您已正确理解transition的工作原理。请参阅我的代码段：

JSFiddle

＆＃13;

.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;
}

＆＃13;

<div class="hoverable">Hover me</div>
<div class="moving">I can move</div>

＆＃13;

在某些情况下，transition-timing-function: ease-out似乎delay似乎是transition，所以我在我的示例中使用transition-timing-function: linear以恒定速度显示转换。

红色块从0%移至200%，0.5s延迟0.5s。并且会立即从200%移至0% 1s。 ggstance package的工作原理没有任何魔力。

＆＃34;来自＆＃34;中的CSS过渡值和＆＃34;到＆＃34;状态

2 个答案: