Question

我在SVG元素的动画中有一个文本和一个块。在我的示例中，我简化了一切。

我想要一个一个初始动画，然后要在block元素上悬停一个动画。初始动画就可以了。（使用chrome进行均等测量）。但是在初始动画之后，用户应该能够将鼠标悬停在块上，并且块本身应该调整大小（这也已经起作用了），并且文本的不透明度应为1。但这是行不通的因为不透明度已由关键帧动画设置。

关于如何解决这一问题的任何建议？我不介意我使用JS或CSS还是任何框架。我不依赖CSS动画。只是用了它们，因为我想我会更清洁。

重要修改：我忘了一件简单但非常重要的事情。在动画之前，在不同的元素上还有其他一些动画。所以我有2秒的延迟。在动画开始之前，不透明度应为0，以便在动画开始之前文本不可见。抱歉，忘记了！

.text{
  font-weight: bold;
  opacity: 0;
  transition: all .8s;
  animation: showText 3s ease-in-out forwards;
  animation-delay: 2s;
}

.text:hover{
  opacity: 1;
  transition: all .8s;
}

.block{
  top: 50px;
  left: 50px;
  position: absolute;
  height: 20px;
  width: 20px;
  background-color: red;
  transition: all .8s;
  animation: popup 3s ease-in-out;
  animation-delay: 2s;
}

.block:hover{
  transform: scale(2);
  transition: all .8s;
}

@keyframes showText {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes popup {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

<div class='text'>
  Foo Bar!
</div>
<div class='block'>
</div>

codepen.io链接（与上面的代码相同）：https://codepen.io/jdickel/pen/xJbQrY

Answer 1

您可以将初始不透明度设置为forwards，而不是0.3动画。

编辑：我相当有信心不能轻易地覆盖转发动画样式（尽管由于某种原因我无法在文档中找到它），因此您可以执行与最初建议类似的操作，只是延长了动画时间，例如所以：

.text{
  font-weight: bold;
  /* Start out at 0.3 */
  opacity: 0.3;
  transition: all .8s;
  /* 2s + 3s = 5s */
  animation: showText 5s ease-in-out; /* no forwards */
}

.text:hover{
  opacity: 1;
  transition: all .8s;
}

.block{
  top: 50px;
  left: 50px;
  position: absolute;
  height: 20px;
  width: 20px;
  background-color: red;
  transition: all .8s;
  animation: popup 3s ease-in-out;
}

.block:hover{
  transform: scale(2);
  transition: all .8s;
}

@keyframes showText {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  /* Note the new animation keyframe locations */
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes popup {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

<div class='text'>
  Foo Bar!
</div>
<div class='block'>
</div>

Answer 2

首先，您需要从forwards .text中删除animation。您可以使用Javascript的mouseenter和mouseleave事件来设置.block悬停时文本的不透明度。

.text{
  font-weight: bold;
  opacity: 0;
  transition: all .8s;
  animation: showText 3s ease-in-out;
  animation-delay: 2s;
}

.text:hover{
  opacity: 1;
  transition: all .8s;
}

.block{
  top: 50px;
  left: 50px;
  position: absolute;
  height: 20px;
  width: 20px;
  background-color: red;
  transition: all .8s;
  animation: popup 3s ease-in-out;
  animation-delay: 2s;
}

.block:hover{
  transform: scale(2);
  transition: all .8s;
}


@keyframes showText {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes popup {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

<div class='text' id="text" onmouseenter="function1()" onmouseleave="function2()">
  Foo Bar!
</div>
<div class='block' onmouseenter="function1()" onmouseleave="function2()">
</div>
<script>
setTimeout(function(){
document.getElementById("text").style.opacity = "0.3";
}, 3000)
function function1(){
 document.getElementById("text").style.opacity = "1";
}
function function2(){
document.getElementById("text").style.opacity = "0.3";
}
</script>

如何将悬停效果应用于正向动画已处理的元素？

2 个答案: