CSS 动画，在 'block' 处滑入，在 'none' 处滑出

Question

我正在构建一些东西，它使用 css 幻灯片动画在文本显示设置为“ block ”时让一些文本滑入，但我想知道我将如何进行反向操作(将其滑出)它设置为“无”？是否可以使用 CSS 动画滑入和滑出，还是必须使用 Javascript？

希望这是有道理的!如果您有任何问题，请告诉我!

JSfiddle 的给你一个更好的主意https://jsfiddle.net/qjwqL236/

谢谢!

和下面的代码:

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

document.getElementById("out-button").onclick = function(){
	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';
}

工作 fiddle :https://jsfiddle.net/qjwqL236/1/