Question

请参见下面的代码段。请注意，将鼠标悬停在某个项目上时，该项目的背景颜色会更改，但是transform: translateY(-5px)会被忽略。仅当未设置.list-item动画时，悬停的变换样式才有效。

如何使translateY(-5px)悬停在代码中工作？

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 50px;
  background: #EFEFEF;

  animation-name: popin;
  animation-fill-mode: both;
  animation-duration: .6s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-delay: 0.1s;
}

.list-item:hover {
  background-color: yellow;
  transform: translateY(-5px);
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
  100%{
    transform:scale(1);
  }
}

<div class="list">
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
</div>

更新

翻译完成后，我还需要进行过渡。

Answer 1

从动画中删除最后一个状态，因为它是默认状态，您将可以覆盖变换。基本上，动画会将元素的状态视为100%，并且当您将鼠标悬停更改时，动画中的元素也会发生变化。

如果未指定100％或关键帧，则用户代理将使用动画属性的计算值构造100％关键帧。^ref

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 50px;
  background: #EFEFEF;

  animation-name: popin;
  animation-fill-mode:both;
  animation-duration: .6s;
  /*animation-iteration-count: 1; also not needed */
  animation-timing-function: ease;
  animation-delay: 0.1s;
}

.list-item:hover {
  background-color: yellow;
  transform: translateY(-5px);
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
}

<div class="list">
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
</div>

更新

如果您要进行过渡，则可以稍稍调整代码，使其具有两个元素，可以轻松独立地应用变换：

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;

  animation-name: popin;
  animation-fill-mode:both;
  animation-duration: .6s;
  animation-timing-function: ease;
  animation-delay: 0.1s;
}
.list-item:before {
  content:attr(data-text);
  display:block;
  padding: 12px 16px;
  border-radius: 50px;
  background: #EFEFEF;
  transition:1s all;
}

.list-item:hover:before  {
  background-color: yellow;
  transform: translateY(-5px);
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
}

<div class="list">
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
</div>

您还可以考虑使用以下类似的包装器：

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;

  animation-name: popin;
  animation-fill-mode:both;
  animation-duration: .6s;
  animation-timing-function: ease;
  animation-delay: 0.1s;
}
.list-item > div {
  padding: 12px 16px;
  border-radius: 50px;
  background: #EFEFEF;
  transition:1s all;
}

.list-item:hover > div  {
  background-color: yellow;
  transform: translateY(-5px);
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
}

<div class="list">
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
</div>

Answer 2

前几天我实际上遇到了类似的问题。我无法告诉您为什么它会这样，但是我可以告诉您我是如何解决的。我创建了另一个动画，并在counts上激活了它。我使用了hover，所以动画只在您将鼠标悬停在其他位置后才能恢复到其初始状态。试试看，让我知道您的想法。

animation-fill-mode: forwards

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 50px;
  border-color: black;
  border: 1px solid black;
  background: #EFEFEF;

  animation-name: popin;
  animation-fill-mode: both;
  animation-duration: .6s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-delay: 0.1s;
}
 
.list-item:hover {
  animation: pull-up 0.3s ease-in-out forwards;
  background-color: yellow;
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
  100%{
    transform:scale(1);
  }
}

@keyframes pull-up {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-5px);
    }
}

悬停时，如何覆盖现有的动画样式？

2 个答案: