颜色的过渡是即时的？ [复制]

Posted 2023-03-06

【中文标题】颜色的过渡是即时的？ [复制]

【英文标题】：Transitions for colurs are instant? [duplicate]

【发布时间】：2019-04-08 01:20:10

【问题描述】：

我在进行基于颜色的过渡时遇到了一些问题...

我正在使用以下 CSS：

.embtn 
    position:absolute;
    top:0vh ;
    left: 0vw;
    border-radius: 5vw;

    padding: 0.2vw;
    color: red; 
    width: calc(2vw + 1vh); 
    height: calc(2vw + 1vh);
    background-color: white;
    -webkit-transition: background-color 2s ;
    -webkit-transition: width 0.5s ease-out;
    -o-transition: background-color 2s ;
    -o-transition: width 0.5s ease-out;
    -moz-transition: background-color 2s ;
    -moz-transition: width 0.5s ease-out;
    transition-delay: 2s;
    transition: background-color 2s ;
    transition-delay: 2s;
    transition: width 0.5s ease-out;
    transition-delay: 2s;

.embtn:hover 


    -webkit-transition: background-color 2s ;
    -webkit-transition: width 0.5s ease-out;
    -o-transition: background-color 2s ;
    -o-transition: width 0.5s ease-out;
    -moz-transition: background-color 2s ;
    -moz-transition: width 0.5s ease-out;
    transition: background-color 2s ;
    transition: width 0.5s ease-out;
    background-color: black;
    width: 30vw;

关于以下代码：

<div class='embtn'><div  id="searchproduct" style="font-size:calc(1vw + 1vh);cursor:pointer; display: inline;" onClick="searchProducts()">&#x1F50D;</div>

<input id="search" style=" color: white; position:absolute; top: calc(((2vw + 1vh)/2)-(1vw + 1vh); );  ; left: 3vw; display: inline; border-style: none; outline: none; background: transparent;  width: 25vw; font-size: calc(1vw + 1vh); " type="text" placeholder=" Search..." name="search" required>
</div>

并且希望看到延迟的过渡...宽度过渡在预期的延迟下工作正常，但颜色过渡没有延迟...即它不仅立即发生，而且在发生之前没有等待 2 秒。 ..

有什么建议吗？

【参考方案1】：

问题是您在之后立即用另一个 CSS 属性覆盖了一个 CSS 属性：

transition: background-color 2s;
transition: width 0.5s ease-out;

如果您这样做，您将看不到 background-color 的任何过渡效果，因为您随后立即将其覆盖，仅适用于 width。

转换多个 CSS 属性的正确方法是用逗号分隔每个转换，如下所示：

transition: background-color 2s ease-out 0.5s, width 2s ease-out 0.5s;

一次设置一个或多个过渡属性的简写语法如下：

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

看看这个Multiple animated properties example

最后，这是您的示例，在 background-color 和 width 属性上进行了转换。

.embtn 
  border-radius: 5vw;
  width: calc(2vw + 1vh);
  height: calc(2vw + 1vh);
  background-color: white;
  transition: background-color 2s ease-out 0.5s, width 2s ease-out 0.5s;


.embtn:hover 
  background-color: black;
  width: 30vw;

<div class='embtn'>
  <div id="searchproduct">&#x1F50D;</div>
  <input id="search" type="text" placeholder=" Search..." name="search" required>
</div>

【参考方案2】：

要在多个属性上设置转换，正确的语法是在同一 transition 简写声明中用逗号分隔每个属性，如下所示：

  ...
  transition: background-color 2s ease 2s, width .5s ease-out;
  /*  property ^               ^    ^   ^    ^    ^      ^   ^      
                      duration ^    ^   ^    ^    ^      ^   ^
                    timing-function ^   ^    ^    ^      ^   ^
                                  delay ^    ^    ^      ^   ^
                                    property ^    ^      ^   ^
                                         duration ^      ^   ^
                                         timing-function ^   ^
                                         implicit delay (0s) ^ */

您拥有的这段代码执行以下操作：

  ...
  transition: background-color 2s;
  transition-delay: 2s;
  transition: width 0.5s ease-out;
  ...

这样做：

将transition-property 设置为background-color，transition-duration 设置为2s，transition-timing-function 设置为ease（默认），transition-delay 设置为0s 将transition-delay 覆盖为2s 将transition-property 设置为width，将transition-duration 设置为0.5s，将transition-timing-function 设置为ease-out 和transition-delay 设置为0s，有效地覆盖@98765443和2.

有关如何使用transition 速记的更深入信息，我推荐MDN 或W3C spec。

【参考方案3】：

首先，如果你需要在 mouseenter 和 mouseleave 上实现相同的悬停效果，只需在没有 :hover 选择器的元素上设置属性

其次，您可以通过在下面设置宽度过渡来覆盖背景颜色过渡。如果您必须指定多个属性（不使用默认的所有属性），请将它们以逗号分隔

.embtn 
    ...
    transition: width 0.5s ease-out 2s, background 2s ease 2s;

.embtn:hover 
    ....

单个属性的语法是

transition: property duration timing-function delay|initial|inherit;

https://www.w3schools.com/cs-s-ref/css3_pr_transition.asp