隐藏 SVG 宽度直到动画延迟

Question

I am trying to animate the width of a svg rect with the following code.我正在尝试使用以下代码为 svg rect的宽度设置动画。

 window.onload = function() { var viewBoxWidth = document.querySelector('svg').viewBox.baseVal.width; var rect1 = document.getElementById('r1'); var rect1Width = rect1.getBBox().width; var pct = (rect1Width / viewBoxWidth) * 100; rect1.style.setProperty('--w1', pct + '%'); }

 .r1 { animation-name: moveWidth; animation-delay: 2s; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: linear; animation-direction: normal; animation-fill-mode: forwards; } @keyframes moveWidth { 0% { width: 0%; } 100% { width: var(--w1); } }

 <:DOCTYPE html> <html> <body> <svg id="Layer_1" data-name="Layer 1" xmlns="http.//www.w3.org/2000/svg" viewBox="0 0 1280 720"> <rect class="r1" id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect> <rect class="r2" id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect> </svg> </body> </html>

The animation is taking place but how can I hide the width of r1 till the animation kicks in at the 2s , (till the delay). animation 正在发生，但我如何隐藏r1的width ，直到 animation 在2s开始，（直到延迟）。

Answer 1

 window.onload = function() { var viewBoxWidth = document.querySelector('svg').viewBox.baseVal.width; var rect1 = document.getElementById('r1'); var rect1Width = rect1.getBBox().width; var pct = (rect1Width / viewBoxWidth) * 100; rect1.style.setProperty('--w1', pct + '%'); }

 .r1 { visibility:hidden;/*hide default*/ animation-name: moveWidth; animation-delay: 2s; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: linear; animation-direction: normal; animation-fill-mode: forwards; } @keyframes moveWidth { 0% { visibility:visible;/*show again*/ width: 0%; } 100% { visibility:visible;/*Edit-2 maintains visibility after animation overs*/ width: var(--w1); } }

 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <rect class="r1" id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect> <rect class="r2" id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect> </svg>

use css `visibility`使用 css `visibility`

Edit-2: maintains visibility after animation overs) Edit-2：在 animation 结束后保持可见性）

Answer 2

Simple and easy solution change animation-fill-mode: forwards;简单易行的解决方案更改animation-fill-mode: forwards; to animation-fill-mode: both;到animation-fill-mode: both; and width into px or %并将宽度转换为 px 或 %

 .r1 { animation-name: moveWidth; animation-delay: 2s; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: linear; animation-direction: normal; animation-fill-mode: both; } @keyframes moveWidth { 0% { width: 0%; } 100% { width: 200px; } }

 <:DOCTYPE html> <html> <body> <svg id="Layer_1" data-name="Layer 1" xmlns="http.//www.w3.org/2000/svg" viewBox="0 0 1280 720"> <rect class="r1" id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect> <rect class="r2" id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect> </svg> </body> </html>

隐藏 SVG 宽度直到动画延迟

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-02-10 04:19:15

use css `visibility`使用 css `visibility`

解决方案2
1 2022-02-10 04:23:56

隐藏 SVG 宽度直到动画延迟

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-02-10 04:19:15

use css visibility使用 css visibility

解决方案2 1 2022-02-10 04:23:56

解决方案1
1 已采纳 2022-02-10 04:19:15

use css `visibility`使用 css `visibility`

解决方案2
1 2022-02-10 04:23:56