0
divで要素をマスクし、元の位置からビューポートの中心までCSSトランジションでアニメーション化するジェネリックJavaScriptコードを作成しようとしています。CSSトランジションを機能させるために、JavaScriptを使用して要素にクラスを適用するにはどうすればよいですか？
私は既に作業スクリプトを持っています。 （コメント化されたコードの多くを、私はあなたがそれを理解することができます願っています。）
私はスクリプトに従う主な手順は次のとおりです：下記のスニペットを参照してください
- 要素を求めると取得それはポジションです。
- ステップ1の要素の上に任意のdivを配置する新しいクラスを作成します（このクラスにはCSSの遷移プロパティが含まれています）。
- 新しいdiv要素を作成し、手順2で作成したクラスを割り当てます。
- これは、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.
\t 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 <style></style> tag sincethe begining.</div>
<br>
<br>
<span id="test">Test</span>
</body>
</html>あなたが見ることができるように、私は2つの異なるボタンでアニメーション処理を行う必要があります。各ボタンが1つのボタンで実行されるコードを挿入しようとすると、アニメーションが実行されず、divがただちに割り当てられた最後のクラスのプロパティと共に表示されます。
あなたは1つのボタンでこれを行う方法はありますか？そして、jQueryではなくjavascriptだけを使用します。
非常にありがとうございます！
内部スタイルシートの内容を変更するには、 'style'要素の' .innerHTML'を設定しないでください。 'styleSheets'プロパティを使います。 https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets –