CSSのアニメーションは、「ブロック」でスライドして「なし」になります

Question

テキストスライドが「ブロック」に設定されているときにテキストをスライドさせるためにCSSスライドアニメーションを使用しているものを構築していますが、それが "none"に設定されているとき、私はどのように逆を行って（スライドさせて）行くのだろうかと思っていますか？ CSSアニメーションでスライドしてスライドさせることは可能ですか？それともJavascriptを使用する必要がありますか？

希望は意味があります！ご質問がある場合はお知らせください。

あなたのより良いアイデアを与えるhttps://jsfiddle.net/qjwqL236/

感謝のJSfiddle！

、以下のコード：あなたのケースでは

document.getElementById("in-button").onclick = function(){ 
 
\t document.getElementById("text-container").style.display = "block"; 
 
} 
 

 
document.getElementById("out-button").onclick = function(){ 
 
\t document.getElementById("text-container").style.display = "none"; 
 
}

#text-container{ 
 
    height: 30px; 
 
    width:300px; 
 
    color: white; 
 
    background-color: blue; 
 
    float:left; 
 
    display:none; 
 
    
 
    position: relative; 
 
    left: -300px; 
 
    animation: slide 0.5sforwards; 
 
    -webkit-animation: slide 0.5s forwards; 
 
} 
 

 
@-webkit-keyframes slide { 
 
    100% { 
 
    left: 0; 
 
    } 
 
} 
 
@keyframes slide { 
 
    100% { 
 
    left: 0; 
 
    } 
 
} 
 

 
#in-button{ 
 
    float:left; 
 
} 
 
    
 
#out-button{ 
 
    float:left; 
 
}

<button id="in-button"> 
 
Make Div slide in 
 
</button> 
 

 
<button id="out-button"> 
 
Make Div slide out? 
 
</button> 
 

 
<br> 
 
<br> 
 

 
<div id="text-container"> 
 
    This is some text in a div. 
 
</div>

Answer 1

。アニメーションよりもトランジションを使う方が簡単です。これはどのように動作するのですか？

毎回ボタンをクリックします。 leftプロパティの値を変更します。

<button id="in-button"> 
Make Div slide in 
</button> 

<button id="out-button"> 
Make Div slide out? 
</button> 

<br> 
<br> 

<div id="text-container"> 
    This is some text in a div. 
</div> 

CSS

#text-container{ 
    height: 30px; 
    width:300px; 
    color: white; 
    background-color: blue; 
    float:left; 
    position: relative; 
    left: -400px; 
    transition: all 0.3s linear 
} 

#in-button, #out-button{ 
    float:left; 
} 

JS

var tC = document.getElementById('text-container'); 

document.getElementById("in-button").onclick = function(){ 
    tC.style.left = '0'; 
} 

document.getElementById("out-button").onclick = function(){ 
    tC.style.left = '-400px'; 
} 

フィドルの作業：https://jsfiddle.net/qjwqL236/1/

Answer 2

を、それが位置よりもパフォーマンスだと、あなたは、アニメーションを必要とするので、あなたは変換CSSを使用する必要がありますし、あなたはクラスの代わりにクラスの変更をトリガーできるアニメーション表示プロパティ。ここで

document.getElementById("in-button").onclick = function(){ 
 
\t document.getElementById("text-container").className = "in"; 
 
} 
 

 
document.getElementById("out-button").onclick = function(){ 
 
\t document.getElementById("text-container").className = "out"; 
 
}

#text-container{ 
 
    height: 30px; 
 
    width: 300px; 
 
    color: white; 
 
    background-color: blue; 
 
    transform: translateX(-310px); 
 
} 
 

 
#text-container.in { 
 
    animation: in 0.5s both; 
 
    -webkit-animation: in 0.5s both; 
 
} 
 

 
#text-container.out { 
 
    animation: out 0.5s both; 
 
    -webkit-animation: out 0.5s both; 
 
} 
 

 
@-webkit-keyframes in { 
 
    100% { 
 
    transform: translateX(0); 
 
    } 
 
} 
 
@keyframes in { 
 
    100% { 
 
    transform: translateX(0); 
 
    } 
 
} 
 

 
@-webkit-keyframes out { 
 
    0% { 
 
    transform: translateX(0); 
 
    } 
 
    100% { 
 
    transform: translateX(-310px); 
 
    } 
 
} 
 
@keyframes out { 
 
    0% { 
 
    transform: translateX(0); 
 
    } 
 
    100% { 
 
    transform: translateX(-310px); 
 
    } 
 
} 
 

 
#in-button{ 
 
    float:left; 
 
} 
 
    
 
#out-button{ 
 
    float:left; 
 
}

<button id="in-button"> 
 
Make Div slide in 
 
</button> 
 

 
<button id="out-button"> 
 
Make Div slide out? 
 
</button> 
 

 
<br> 
 
<br> 
 

 
<div id="text-container"> 
 
    This is some text in a div. 
 
</div>

Answer 3

あなたがアニメーションを使って何ができるかです。 slide-inのように、slide-outのアニメーションを作成する必要があります。

displayをnoneまたはblockに変更すると、自動的にスライドイン/アウトされないことに注意してください。

document.getElementById("in-button").onclick = function() { 
 
    document.getElementById("text-container").setAttribute('class', 'slide-in'); 
 
} 
 

 
document.getElementById("out-button").onclick = function() { 
 
    document.getElementById("text-container").setAttribute('class', 'slide-out'); 
 
}

#text-container { 
 
    height: 30px; 
 
    width: 300px; 
 
    color: white; 
 
    background-color: blue; 
 
    float: left; 
 
    position: relative; 
 
    left: -300px; 
 
} 
 
.slide-in { 
 
    animation: slide-in 0.5s forwards; 
 
    -webkit-animation: slide-in 0.5s forwards; 
 
} 
 
.slide-out { 
 
    animation: slide-out 0.5s forwards; 
 
    -webkit-animation: slide-out 0.5s forwards; 
 
} 
 
@-webkit-keyframes slide-in { 
 
    100% { 
 
    left: 0; 
 
    } 
 
} 
 
@keyframes slide-in { 
 
    100% { 
 
    left: 0; 
 
    } 
 
} 
 
@-webkit-keyframes slide-out { 
 
    0% { 
 
    left: 0; 
 
    } 
 
    100% { 
 
    left: -300px; 
 
    } 
 
} 
 
@keyframes slide-out { 
 
    0% { 
 
    left: 0; 
 
    } 
 
    100% { 
 
    left: -300px; 
 
    } 
 
} 
 
#in-button { 
 
    float: left; 
 
} 
 
#out-button { 
 
    float: left; 
 
}

<button id="in-button"> 
 
    Make Div slide in 
 
</button> 
 

 
<button id="out-button"> 
 
    Make Div slide out? 
 
</button> 
 

 
<br> 
 
<br> 
 

 
<div id="text-container"> 
 
    This is some text in a div. 
 
</div>