Question

我希望在从元素添加/删除类时为每个转换实现不同的转换。最好的解决方案是不修改HTML结构，甚至不添加其他类。

.navbar {
    height: 60px;
    transform: translate(0, 0);
    transition: transform .5s ease; /* for transform: translate(0, -60px); */
    transition: transform .2s linear; /* for transform: translate(200px, 0); */
}

.navbar.slide-up {
    transform: translate(0, -60px);
}

.navbar.slide-left {
    transform: translate(200px, 0);
}

Answer 1

您可以在可切换类

上添加转换

.navbar {
    height: 60px;
    transition: transform .35s;   /* same for both when class is removed  */
    transform: translate(0, 0);
}

.navbar.slide-up {
    transition: transform .5s ease; /* for transform: translate(0, -60px); */
    transform: translate(0, -60px);
}

.navbar.slide-left {
    transition: transform .2s linear; /* for transform: translate(200px, 0); */
    transform: translate(200px, 0);
}

更新，2：nd

请注意，根据您的脚本的外观，可能会使用给定的转换，并使用navbar将其设置为cssText（如果您赢了＆＃ 39;不需要额外的课程）

更新

如果可以再添加2个类，则可以在重置元素位置时获得唯一的转换

有了这个，你首先清除所有类，添加其中一个，然后，在删除时添加它的反向。

.navbar {
    height: 60px;
    transform: translate(0, 0);
}

.navbar.slide-up {
    transition: transform .5s ease; /* for transform: translate(0, -60px); */
    transform: translate(0, -60px);
}

.navbar.slide-left {
    transition: transform .2s linear; /* for transform: translate(200px, 0); */
    transform: translate(200px, 0);
}

.navbar.slide-up-reverse {
    transition: transform .5s ease; /* for transform: translate(0, -60px); */
}

.navbar.slide-left-reverse {
    transition: transform .2s linear; /* for transform: translate(200px, 0); */
}

每个转换的不同转换

1 个答案: