Question

我正在学习如何在CSS中制作模态图像，并且遇到了这个示例，其中有两个声明块包含仅指定持续时间（？）的转换：

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

和

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

它写在“How to...Modal Images”一章。（W3Schools的）。它是否正确？如果是，它是transition: all 0.3s;的替代品吗？

Answer 1

就像肖恩所说，transition的初始价值就是全部。这并不意味着你应该像那样使用它。众所周知，使用初始值可能会导致性能下降，请阅读this。

最好是声明要应用转换的每个值。您可能最初没有看到性能损失，但随着您不断扩展CSS文件，您需要密切关注它。

示例：

未声明all值：

＆＃13;

.shape {
  display: inline-block;
  border-radius: 50%;
  border: 20px solid;
  border-color: #4285F4 #0F9D58 #F4B400 #DB4437;
  width: 50px;
  height: 50px;
  transition: 0.5s ease-in;
}
.shape:hover {
  border-radius: 0;
  width: 100px;
  height: 100px;
}

＆＃13;

<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>

＆＃13;

声明all值：

＆＃13;

.shape {
  display: inline-block;
  border-radius: 50%;
  border: 20px solid;
  border-color: #4285F4 #0F9D58 #F4B400 #DB4437;
  width: 50px;
  height: 50px;
  transition: all 0.5s ease-in;
}
.shape:hover {
  border-radius: 0;
  width: 100px;
  height: 100px;
}

＆＃13;

<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>

＆＃13;

更好的表现：

＆＃13;

.shape {
  display: inline-block;
  border-radius: 50%;
  border: 20px solid;
  border-color: #4285F4 #0F9D58 #F4B400 #DB4437;
  width: 50px;
  height: 50px;
  transition: border-radius 0.5s ease-in, width 0.5s ease-in, height 0.5s ease-in;
}
.shape:hover {
  border-radius: 0;
  width: 100px;
  height: 100px;
}

＆＃13;

<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>

＆＃13;

更好的表现

如果您能负担元素重叠和border-width增量以避免重绘。

＆＃13;

.shape {
  display: inline-block;
  border-radius: 50%;
  border: 20px solid;
  border-color: #4285F4 #0F9D58 #F4B400 #DB4437;
  width: 50px;
  height: 50px;
  transition: border-radius 0.5s ease-in, transform 0.5s ease-in;
  transform-origin: top left;
}
.shape:hover {
  border-radius: 0;
  transform: scale(2);
}

＆＃13;

<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>

＆＃13;

请阅读this以获取进一步说明。

Answer 2

根据MDN，transition-property的初始值为all，因此如果您不以速记transition指定它，它应该以相同的方式运行。< / p>

https://www.raspberrypi.org/learning/temperature-log/worksheet/

与W3相同：https://developer.mozilla.org/en-US/docs/Web/CSS/transition

没有指定属性的转换

2 个答案: