Question

我的动画似乎不想在悬停时打开和关闭。我已经尝试将动画线放在LI上：在它自己之前并交换0％和100％然后根本没有任何事情发生。我已经乱了好几个小时无济于事。

编辑：更新了链接，代码

    ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style-type: none;
  background-color: $base-gray-t;
  margin: 1em;
  padding: .25em 0 0 0;
  height: 3em;
  border-bottom: 0.375em solid $secondary-color;
  overflow: hidden;
  box-shadow: .05em .05em 1em 0;
}

li {
  position: relative;
  color: $base-gray-light;
  padding: 0.40em;
  font-size: 1.5em;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  z-index: 2;
}

li:not(.active):not(:first-child):before {
  content: '';
  display: block;
  position: absolute;
  bottom: .01em;
  width: 100%;
  height: 2em;
  margin-left: -.4em;
  border-radius: .25em .25em 0 0;
  z-index: -1;
}

li:hover:before {
  background: $primary-color;
  animation: splash .3s ease;
  bottom: .01em
}

@keyframes splash {
  0% {
    bottom: -2em;
    border-radius: 100%;
  }
  100% {
    bottom: .01em;
  }
}

Answer 1

转换方法的涉及程度要低得多，而且问题的范围也较小，所以我编辑了你的小提琴来代替使用它：

https://jsfiddle.net/6t8xLssv/1/

我只是在悬停时转换了：before元素，但活动li的情况除外。

li:before{
  content:'';
  display:inline-block;
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  height:0;
  transition:height 0.2s linear;
  background:pink;
  border-radius:5px 5px 0 0;
  z-index:-1;
}
li:hover:before{
  transition:height 0.2s linear;
  height: 2em;
}
li.active:before{
  display:none;
}

我希望这会有所帮助

Answer 2

如果您要完成在animation上创建的hover，那么为此添加forwards以及animation properties，如下所示

li:hover:before {
  background: $primary-color;
  animation: splash .3s ease forwards;
  bottom: .01em
}

检查此工作jsfiddle链接。

动画无法在悬停时打开和关闭

2 个答案: