Question

我正在构建一些使用css幻灯片动画的东西，当文本显示设置为“阻止”时有一些文本幻灯片，但我想知道如何进行反向（滑出）它被设置为“无”？是否可以使用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';
}

工作小提琴：https://jsfiddle.net/qjwqL236/1/

Answer 2

你应该使用css translate，因为它比定位更高效，然后你需要动画和动画输出你可以用类更改而不是显示属性来触发。

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

CSS动画，在'块'上滑动，在'无'上滑入

2 个答案: