試圖在點擊時顯示 animation....不工作（js，html，css）

Question

我有一個加載元素，我想在單擊某個按鈕時顯示它。 我嘗試了各種方法，包括更新可見性和顯示，以及將“顯示”類列表添加到 div onclick（當前代碼）。 到目前為止沒有任何效果，我很絕望。 我真的很感激任何幫助。 謝謝：）

 document.getElementById('text-generate-button').onclick = () => { parent.postMessage({ pluginMessage: { type: 'placeholder-frame' } }, '*') const loader = document.getElementById('loader'); loader.classList.add("show") }

 .loader { opacity: 0; background: #ffffff; /* background: radial-gradient(#222, #000); */ bottom: 0; left: 0; right: 0; top: 0; /* z-index: 99999; */ -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); }.loader.show { background: #ffffff; /* background: radial-gradient(#222, #000); */ bottom: 0; left: 0; right: 0; top: 0; /* z-index: 99999; */ -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); }.loader-inner { bottom: 0; height: auto; left: 0; margin: auto; position: relative; right: 0; top: 0; width: 100px; padding: 8px; }.loader-line-wrap { animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite; box-sizing: border-box; height: 50px; left: 0; overflow: hidden; position: absolute; top: 0; transform-origin: 50% 100%; width: 100px; }.loader-line { border: 4px solid transparent; border-radius: 100%; box-sizing: border-box; height: 100px; left: 0; margin: 0 auto; position: absolute; right: 0; top: 0; width: 100px; }.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }.loader-line-wrap:nth-child(1).loader-line { border-color: #EB6A6F; height: 90px; width: 90px; top: 7px; }.loader-line-wrap:nth-child(2).loader-line { border-color: #F6BA48; height: 76px; width: 76px; top: 14px; }.loader-line-wrap:nth-child(3).loader-line { border-color: #B5D643; height: 62px; width: 62px; top: 21px; }.loader-line-wrap:nth-child(4).loader-line { border-color: #50CFD4; height: 48px; width: 48px; top: 28px; }.loader-line-wrap:nth-child(5).loader-line { border-color: #9665D4; height: 34px; width: 34px; top: 35px; } @keyframes spin { 0%, 15% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

 <div class="footer"> <div class="loader"> <div class="loader-inner"> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> </div> </div>

Answer 1

我認為問題在於您添加的“顯示”class 設置為“顯示：無”。 也許它可以幫助。

Answer 2

我沒有深入研究是否有更好的方法，但你可以做的一件事是在你的 HTML 集合中

<div class="loader" id="loader>

在你的 JS 中

 loader.classList.toggle("loader")

這里是運行版本： https://jsbin.com/boromarugo/edit?html,css,js,output

應該有更清潔的方法，但你明白了