Javascript 从100%过渡到自动

我有以下资料：

我想知道为什么过渡不起作用？它应该做的是将隐藏元素（可以是可变宽度）滑入

.block

元素的右边缘，但是，它只是突然出现

.block{
位置：相对位置；
宽度：500px；
高度：300px；
溢出：隐藏；
背景：浅灰色；
}
.封锁，隐藏{
背景：红色；
填充：3x10px；
位置：绝对位置；
底部：0；
左：100%；
过渡：1s；
}
.block:悬停。隐藏{
过渡：1s；
左：自动；
右：0；
}

ABCDEFGHIJKL

正如您所说，您无法从

%

设置动画到

自动

。但是为了获得渴望的效果，你也可以使用

transform

property。试试这个：

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    transform:translateX(100%);
    transition: 1s;
}

.block:hover .hidden {
    transition: 1s;
    transform:translateX(0)
}

---

检查

考虑在

右侧

从

-100%

转换到

0

：

.block{
位置：相对位置；
宽度：500px；
高度：150px；/*缩短以适合“运行”窗口*/
溢出：隐藏；
背景：浅灰色；
}
.封锁，隐藏{
背景：红色；
填充：3x10px；
位置：绝对位置；
底部：0；
右图：-100%；
过渡：1s；
}
.block:悬停。隐藏{
右：0；
过渡：1s；
}

ABCDEFGHIJKL

要转换到工作状态，您必须在两种元素状态中定义要更改的属性。 在您的示例中，它不起作用，因为“.hidden”和“：hover”之间没有公共属性（您在“.hidden”中设置“left”属性，在“：hover”中设置“right”属性）

如果您改为使用以下内容：

.block {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
    background: lightgrey;
}

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    right: -100%;
    transition: 1s;
}

.block:hover .hidden {
    transition: 1s;
    right: 0%;
}

---

它将起作用，因为我们在两种状态（“.hidden”和“：hover”）中定义了“right”属性

Nice+1。另外，请考虑希望元素不会比容器大。问题是，我们将元素隐藏得比需要隐藏的更远（刚好是右边缘），这会减慢转换速度，因为它需要移动得更远。了解您试图实现的目标会很好