Question

我有一个div，它具有相对位置，并定义了左，上和框阴影。当我编写div：hover语句时，我试图转换每个这些属性。它适用于单个属性，但不适用于2个或更多属性。这是否应该发生？和/或如何解决，以便可以进行多个转换？

我解决了悬停之前没有定义top和left的问题，但是当一次有多个转换时，它仍然不能解决问题。

.faq-card {
                border-radius: 10px;
                border: 1px solid white;
                box-shadow: 10px 10px 10px rgba(216, 44, 44, .5);
                height: 100px;
                position: relative;
                left: 0px;
                top: 0px;
}
.faq-card:hover {
                box-shadow: 0px 0px 10px rgba(216, 44, 44, .5);
                left: 10px;
                top: 10px;
                transition: left 1000ms ease;
                transition: top 1000ms ease;
                transition: box-shadow 1000ms ease;
}

我希望div向右移动10px，向下移动10px，并且框阴影以过渡方式（而不是生涩的方式）淡入div。但是，他们都可以立即执行此操作，而不会进行过渡。感谢您的帮助

Answer 1

这是因为每个transition属性都将覆盖之前的属性。

如果您需要转换多个属性，则可以使用all（这可能会导致您意想不到的转换）或逗号分隔要更改的值

所以代替：

            transition: left 1000ms ease;
            transition: top 1000ms ease;
            transition: box-shadow 1000ms ease;

使用

            transition: left 1000ms ease, top 1000ms ease, box-shadow 1000ms ease;

请注意，通过这种方式，您可以在一条语句中为EACH属性提供不同的时间和缓动功能。

Answer 2

您能做的就是全部

transition: all 1000ms ease;

这将影响所有更改

过渡不适用于多个属性

2 个答案: