純粋なCSSのアニメーション再生状態のドアエフェクトボタン

Question

基本的に私はdivでドアエフェクトの種類を作りたいと思った。

ボタンをクリックすると開くとシャットダウンする。

var buttons = document.querySelectorAll('button'); 
 
[].forEach.call(buttons, function(btn) { 
 
    btn.addEventListener('click', function(e) { 
 
    var target = e.target; 
 
    if (target.nodeName.toLowerCase() === 'button') { 
 
     document.getElementById(target.dataset.target + '-div').className = target.textContent === 'stop' ? '' : target.textContent; 
 
    } 
 
     
 
    }); 
 
});

button { 
 
    height: 24px; 
 
    font-size: 16px; 
 
} 
 

 
div { 
 
    position: relative; 
 
    left: 0; 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    transform: none; 
 
    margin-top: 10px; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 0 white solid; 
 
    background-color: green; 
 
} 
 

 
#transition-div { 
 
    transition: transform 1s ease-in-out; 
 
} 
 

 
#transition-div.start { 
 
    transform: translateX(400px); 
 
} 
 

 

 
@keyframes move-right { 
 
    0% { transform: translateX(0px); } 
 
    50% { transform: translateX(400px); } 
 
    100% { transform: translateX(0px); } 
 
}

<section> 
 
    <h1>Transition</h1> 
 
    <button data-target="transition">start</button> 
 
    <button data-target="transition">stop</button> 
 
    <div id="transition-div"></div> 
 
</section>

トップの結果は、純粋なCSSで作成することができますまたはJavaScriptをウェブページに実装する必要がありませんか？ 「開始」ボタンと「停止」ボタンを1つのボタンに統合できますか？ 乾杯！

Answer 1

次に、あなたの質問がある場合のみ、JSを使用しなくても、まったく同じ出力を取得する方法にCSSだけ

div { 
 
    position: relative; 
 
    left: 0; 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    transform: none; 
 
    margin-top: 10px; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 0 white solid; 
 
    background-color: green; 
 
} 
 
#transition-div { 
 
    transition: transform 1s ease-in-out; 
 
} 
 
#toggleStartStop { display: none } 
 
#toggleStartStop ~ label[for="toggleStartStop"] { 
 
    padding: 3px 10px; 
 
    background: lightgray; 
 
} 
 

 
#toggleStartStop:checked ~ #transition-div { 
 
    transform: translateX(400px); 
 
} 
 
#toggleStartStop ~ label[for="toggleStartStop"]:after { 
 
    content: 'Start'; 
 
} 
 
#toggleStartStop:checked ~ label[for="toggleStartStop"]:after { 
 
    content: 'Stop'; 
 
} 
 

 
@keyframes move-right { 
 
    0% { transform: translateX(0px); } 
 
    50% { transform: translateX(400px); } 
 
    100% { transform: translateX(0px); } 
 
}

<section> 
 
    <h1>Transition</h1> 
 
    <input id="toggleStartStop" type="checkbox"/> 
 
    <label for="toggleStartStop"></label> 
 
    <div id="transition-div"></div> 
 
</section>

Answer 2

を使用して（とは限らないanimation使用するか、animation-play-state）ことを行うことができますあなたは以下のスニペットのようにそれを行うことができます。一方、CSSを使用してアニメーションのこの正逆の効果を得ようとしている場合、これは不可能です。

ここでは、入力要素とラベル（ボタンとして機能する）が使用されています。ラベルがクリックされると、for属性に基づいてinputがチェックされます。 inputがチェックされている場合、セレクタを使用してtransformが要素に適用されます。これは、inputの兄弟である要素を選択し、inputがチェックされたときid='transitiondiv'である要素を選択することを意味する。を意味する。を意味する。再度ラベルをクリックすると、inputはチェックされなくなり、要素は元の状態に戻されます。

input自体を表示エリア外に移動するには、leftプロパティの値が負の値のposition: absoluteが使用されます。

input { 
 
    position: absolute; 
 
    left: -100px; 
 
} 
 
label { 
 
    display: inline-block; 
 
    padding: 8px; 
 
    border: 1px solid; 
 
    cursor: pointer; 
 
} 
 
div { 
 
    position: relative; 
 
    left: 0; 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    transform: none; 
 
    margin-top: 10px; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 0 white solid; 
 
    background-color: green; 
 
} 
 
#transition-div { 
 
    transition: transform 1s ease-in-out; 
 
} 
 
input:checked ~ #transition-div { 
 
    transform: translateX(400px); 
 
}

<section> 
 
    <input type="checkbox" id="control" /> 
 
    <label for="control">Toggle</label> 
 
    <div id="transition-div"></div> 
 
</section>