Question

问题： CSS可以检测动画是否不完整吗？

故事时间：我有一个带有动画按钮的超酷用户界面。如果将鼠标悬停在它们上方，它们就会增长。因此，按钮栏中的其他按钮应同时收缩。

我的问题（是特定问题，但也很普遍，因为我在多个情况下都遇到了这个问题。）：当我快速浏览所有按钮时，有2个按钮正在缩小，而只有1个按钮正在增长，因此它们没有像应有的那样填满按钮栏。

错误代码：

.container:hover button{
    width: calc((100% / 3) - 5%);
}
.container button:hover{
    width: calc((100% / 3) + 10%);
}

完整代码：

.container {
  width: 375px;
  height: 100px;
}

.container button {
  transition: .15s;
  float: left;
  height: 100%;
  border: none;
  object-fit: cover;
  width: calc(100% / 3);
}

.container:hover button {
  width: calc((100% / 3) - 5%);
}

.container button:hover {
  width: calc((100% / 3) + 10%);
}

button.green {
  background-color: #27ae60;
  color: white;
}

button.blue {
  background-color: #3498db;
  color: white;
}

button.white {
  background-color: #ecf0f1;
}

body {
  background-color: #929AAA;
}

div.container {
  background-color: #FFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: calc(100vh / 4 - 50px) auto
}

<div class="container">
  <button class="white">to site</button>
  <button class="blue">login</button>
  <button class="green">register</button>
</div>

Answer 1

一个想法是仅使一个元素更改其大小，而另一个将缩小。这是flexbox的示例：

.container {
  width: 375px;
  height: 100px;
  display: flex;
}

button {
  transition: .15s;
  flex: 1;
  border: none;
}
/* you want to have 28% + 44% + 28% so it's 1 + 1.57 + 1*/
.container button:hover {
  flex: 1.57;
}

/*For styling*/
button.green {
  background-color: #27ae60;
  color: white;
}

button.blue {
  background-color: #3498db;
  color: white;
}

button.white {
  background-color: #ecf0f1;
}

body {
  background-color: #929AAA;
}

div.container {
  background-color: #FFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: calc((100vh - 100px) / 2) auto
}

<div class="container">
  <button class="white">to site</button>
  <button class="blue">login</button>
  <button class="green">register</button>
</div>

尚未完成UI的CSS动画

1 个答案: