每次单击 span 时，如何运行一个 div 的函数？

Question

单击“xbutton”时，我希望 div 进行转换，使其旋转、变小并更改不透明度以隐藏（并将内部元素的显示设置为 none).这在第一次单击“xbutton”时应该起作用，但在其他按钮上，它不会旋转。我的 JS 有问题。 CSS:

#addPopUp {
                opacity:1;
                position:absolute;
                width:50px;
                height:50px;
                transition: opacity, width, height, transform;
                transition-timing-function:ease;
                transition-duration:1s;
                display:none;
            }
            #xbutton {
                margin-left: 140px;
                margin-top:-60;
                position:absolute;
                opacity:1;
                transition:color, display,font-size, 0.06s;
            }

HTML:

<div id="addPopUp">
                <h3 id="h3">Select what you would like to add:</h3>
                <span id="xbutton"><strong>&times;</strong></span>
            </div>

JS:

document.getElementById("xbutton").onclick = function() {
               document.getElementById("xbutton").style.display = "none"
               document.getElementById("addPopUp").style.opacity = "0"
               document.getElementById("addPopUp").style.transform = "rotate(360deg)"
               document.getElementById("addPopUp").style.width = "50px"
               document.getElementById("addPopUp").style.height = "50px"
               document.getElementById("h3").style.display = "none"
           }

Answer 1

如果您正在使用 CSS 动画，需要注意的一件重要事情是 CSS 动画不会自动重启，除非您告知它们。

一种方法是在添加样式时再次删除它，以便下次应用该样式。

document.getElementById("xbutton").onclick = function() {
// resetting the styles before the animation begins: 
               document.getElementById("xbutton").style.display = "block"
               document.getElementById("addPopUp").style.opacity = "1"
//etc...
               document.getElementById("xbutton").style.display = "none"
               document.getElementById("addPopUp").style.opacity = "0"
               document.getElementById("addPopUp").style.transform = "rotate(360deg)"
               document.getElementById("addPopUp").style.width = "50px"
               document.getElementById("addPopUp").style.height = "50px"
               document.getElementById("h3").style.display = "none"

           }

每次单击 span 时，如何运行一个 div 的函数？

How to run a function for a div every time the span is clicked?

javascript

function

onclick

rotation

transition

每次单击 span 时，如何 运行 一个 div 的函数？

How to run a function for a div every time the span is clicked?

javascript

function

onclick

rotation

transition

每次单击 span 时，如何运行一个 div 的函数？