如何使用JavaScript将类应用于元素，以使CSS转换有效？

Question

I'm trying to create a generic JavaScript code to mask an element with a div and animate it with CSS Transitions from it's original position to the center of the viewport, expanding it almost full-screen as I do so. 我正在尝试创建一个通用JavaScript代码，以使用div遮盖元素，并使用CSS过渡（从其原始位置到视口的中心）对其进行动画处理，同时将其扩展为全屏显示。

I already have a working script. 我已经有一个工作脚本。 See snippet below: (Much of the code is commented, so I hope you can understand it.) 请参见下面的代码段：（大部分代码都已注释，因此希望您能理解。）

The main steps that I follow in the script are the following: 我在脚本中遵循的主要步骤如下：

Ask for an element and get it's position. 要求一个元素并获得它的位置。
Create a new class that positions any given div on top of the element from step 1 (this class contains CSS Transition properties). 创建一个新类，将任何给定的div放置在步骤1的元素之上（该类包含CSS Transition属性）。
Create a new div element and assign it the class created in step 2. 创建一个新的div元素，并为其分配在步骤2中创建的类。
Now apply a DIFFERENT class (which was from the begining on the css stylesheet) to the div from step 3 in order to make it transition from the one it received in the script to this one. 现在，将DIFFERENT类（从css样式表的开头开始）应用于步骤3中的div，以使其从脚本中接收到的那个过渡到这个。

 function expand(id) { //I first create a style element in which I'll be able to insert a new class that I'm going to create. This new class will be used to position the future div on top of the element whose id was provided as argument of this function. var style = document.createElement('style'); style.type = 'text/css'; var style_content = ""; var element = document.getElementById(id); var element_properties = element.getBoundingClientRect(); //Here I get the position of the element. //Now I describe the new class. style_content += ".container_inactive {" style_content += "box-sizing: border-box;"; style_content += "position:absolute;"; style_content += "top:" + element_properties.top + "px;"; style_content += "left:" + element_properties.left + "px;*/"; style_content += "padding:0px;"; style_content += "margin:0px;"; style_content += "border:solid;"; style_content += "border-color:black;"; style_content += "background-color:#40efbb;"; style_content += "height:" + element_properties.height + "px;"; style_content += "width:" + element_properties.width + "px;"; style_content += "transition: all 0.5s;"; style_content += "z-index:1;"; style_content += "}"; style.innerHTML = style_content; //I insert the previously described class inside the <style></style> tags. document.getElementsByTagName('head')[0].appendChild(style); //I insert the previously created style element inside the <head></head> tags. //Now I create the div var div = document.createElement("div"); div.id = "created_div"; div.className = "container_inactive"; //Here I assign the created class to the created div document.getElementsByTagName("body")[0].appendChild(div); //And instert the div in the body of the document } //------------This is just a random divisor------------------ document.getElementById("test_button_1").onclick = function() { expand("test"); //I excecute the script to create the class and the div, and assigning the style to the div. /*With the following line I would apply a DIFFERENT class to the div (and not the one created in the previous script), in order to make it transition to it. But here is where I run into troubles. If uncommented, the CSS Transition won't take place. If excecuted later by another button, the CSS does takes place as you can see in this snippet*/ //document.getElementById("created_div").classList.toggle("container_expand"); }; //This is what I have to do in order to make it work. document.getElementById("test_button_2").onclick = function() { document.getElementById("created_div").classList.toggle("container_expand"); };

 <!DOCTYPE html> <html> <body> <style> /*This is the class that will be applied with the second button.*/ .container_expand { position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; } /*------------------*/ .container { padding: 3px; margin: 10px; height: 40px; background-color: #bad4ff; } </style> <div class="container" id="test_button_1">Click me first to create a new class, a new div, and asign the created class to the created div.</div> <div class="container" id="test_button_2">Click me second to apply the "container_expand" class, which was on the css &lt;style&gt;&lt;/style&gt; tag sincethe begining.</div> <br> <br> <span id="test">Test</span> </body> </html>

As you can see, I have to make the animation process with two different buttons. 如您所见，我必须使用两个不同的按钮进行动画处理。 When I try to put the code that each button excecutes in a single button, the animation doesn't take place and the div just instantly appears with the properties of the last class assigned to it. 当我尝试将每个按钮执行的代码放在单个按钮中时，动画不会发生，并且div会立即显示，并带有分配给它的最后一个类的属性。

Do you guys see any way of doing this with just one button? 你们看到一个按钮就能做到这一点吗？ And just using javascript, not jQuery. 而且只使用javascript，而不是jQuery。

Thank you very very much! 非常非常感谢你！

Answer 1

I think this is just an issue of the UI being updated with the final style faster than the duration of the animation. 我认为这只是UI的最终样式更新速度快于动画持续时间的问题。

Setting a short delay on the animation solves the problem. 在动画上设置短暂的延迟即可解决该问题。

 function expand(id) { //I first create a style element in which I'll be able to insert a new class that I'm going to create. This new class will be used to position the future div on top of the element whose id was provided as argument of this function. var style = document.createElement('style'); style.type = 'text/css'; var style_content = ""; var element = document.getElementById(id); var element_properties = element.getBoundingClientRect(); //Here I get the position of the element. //Now I describe the new class. style_content += ".container_inactive {" style_content += "box-sizing: border-box;"; style_content += "position:absolute;"; style_content += "top:" + element_properties.top + "px;"; style_content += "left:" + element_properties.left + "px;*/"; style_content += "padding:0px;"; style_content += "margin:0px;"; style_content += "border:solid;"; style_content += "border-color:black;"; style_content += "background-color:#40efbb;"; style_content += "height:" + element_properties.height + "px;"; style_content += "width:" + element_properties.width + "px;"; style_content += "transition: all 0.5s;"; style_content += "z-index:1;"; style_content += "}"; style.innerHTML = style_content; //I insert the previously described class inside the <style></style> tags. document.getElementsByTagName('head')[0].appendChild(style); //I insert the previously created style element inside the <head></head> tags. //Now I create the div var div = document.createElement("div"); div.id = "created_div"; div.className = "container_inactive"; //Here I assign the created class to the created div document.getElementsByTagName("body")[0].appendChild(div); //And instert the div in the body of the document } //------------This is just a random divisor------------------ document.getElementById("test_button_1").onclick = function() { expand("test"); //I excecute the script to create the class and the div, and assigning the style to the div. /*With the following line I would apply a DIFFERENT class to the div (and not the one created in the previous script), in order to make it transition to it. But here is where I run into troubles. If uncommented, the CSS Transition won't take place. If excecuted later by another button, the CSS does takes place as you can see in this snippet*/ //document.getElementById("created_div").classList.toggle("container_expand"); // Delay the animation by 50/1000 of a second: setTimeout(function(){ document.getElementById("created_div").classList.toggle("container_expand"); }, 50); };

 <!DOCTYPE html> <html> <body> <style> /*This is the class that will be applied with the second button.*/ .container_expand { position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; } /*------------------*/ .container { padding: 3px; margin: 10px; height: 40px; background-color: #bad4ff; } </style> <div class="container" id="test_button_1">Just click me one time!</div> <br> <br> <span id="test">Test</span> </body> </html>

如何使用JavaScript将类应用于元素，以使CSS转换有效？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-05-07 22:35:50

如何使用JavaScript将类应用于元素，以使CSS转换有效？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-05-07 22:35:50

解决方案1
0 已采纳 2017-05-07 22:35:50