jquery将幻灯片动画切换为纯JavaScript动画

Question

见这里 https://jsfiddle.net/97Lahmoh/或http://www.w3schools.com/code/tryit.asp?filename=FB8TE2KSHGZ5

基本上我想使用jquery ui切换幻灯片动画而不需要任何jquery和插件。 这是完成工作的jquery代码。

$( "#effect" ).toggle("slide", {direction: "left"}, 500);

如何在纯JavaScript代码上使用它？我不擅长动画。

Answer 1

您可以使用css transition属性来实现此目的。

以下是JSFIDDLE

Answer 2

您可以将css过渡与位置属性一起使用。

试试这个：

a^2 + b^2 = c^2 

function toggle() {
  var div1 = document.getElementById("div1");
  if (document.getElementsByClassName("hide").length == 0) {
    div1.className = "test hide";
  } else {
    div1.className = "test show";
  }

}

.test {
  width: 200px;
  height: 100px;
  background-color: #2354A4;
  transition: left 2s;
  position: relative;
  top: 0px;
  bottom: 0px;
  right: 0px;
}

.hide {
  left: -250px;
}

.show {
  left: 0px;
}