Question

我有SVG，它包含两个环：内部和外部。我正在尝试创建一个动画，其中svg on hovered立即显示内环，并在300ms后显示。

我尝试使用SELECT SUM(amount) AS amount FROM (SELECT *,COUNT(*) FILTER(WHERE status<>1) OVER(PARTITION BY reference) cnt FROM tc) AS sub WHERE cnt = 0;动画，但显然我不能在父项悬停时触发子元素动画。请参阅this pen。

Answer 1

问题是你在<svg>元素本身触发了关键帧动画，然后告诉其中的一个元素有一个延迟动画。

您只能在动画元素上添加animation-delay等属性，因此我将动画移动到<circle>元素。你走了：

＆＃13;

svg {
  width: 202px;
  height: 202px;
}

svg:hover circle {
  animation: show-inner 1s;
}

svg circle.ring-outer {
  animation-delay: 300ms;
}

@keyframes show-inner {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

＆＃13;

<svg viewbox="0 0 202 202" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="101" cy="101" r="100" stroke="#7b82c7" stroke-width="1" fill="none" class="ring-outer"/>  
  <circle cx="101" cy="101" r="76" stroke="#7b82c7" stroke-width="1" fill="none" class="ring-inner"/>  
</svg>

＆＃13;

使用CSS悬停时SVG不透明度动画

1 个答案: