Question

我希望整个div在onclick之后向左滑动，说实话我不知道我的代码有什么问题：/ 当你再次点击它时我也会添加它回到常规位置，但我真的需要弄清楚我将如何获得幻灯片动画。这是我第一次使用animationName属性。我想用JavaScript而不是JQuery来做。

＆＃13;

function function1(){
document.getElementById("front_page_blur").style.animationName = "slide";
}

＆＃13;

body{
  background-color:blue;
  }
.front_page_blur{
margin: auto;
width: 700px;
height: 425px;
background-color: rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 20px 9px black;
}
#front_page_blur{
transition: 1s ease;
animation: 2s;
}
.button {
margin-left: 40px;
margin-right: 40px;
margin-top: 35px;
text-align: center;
width: 150px;
height: 150px;
border-radius: 10%;
display: inline-block;
}
#button1_text {
color: white;
font-family:Arial Black;
padding-top: 10px;
}
#button1{
background-color: rgba(0, 191, 255, 0.3);
z-index:2;
transition: background-color 0.3s ease-out;
}
#button1:hover {
background-color:rgba(0, 191, 255, 0.5);
transition: background-color 0.3s ease-in-out;
}
@keyframes slide {
 from { left: 0px;}
 to { left: 200px;}
    
}

＆＃13;

<body>
<div class="front_page_blur" id="front_page_blur">
<h1 class="welcomeMSG">Welcome To TheFunction</h1>
<h1 class="welcomeMSG" id="welcomeMSG_U">Choose Your Destination</h1>
<div class="button" id="button1" onclick="function1()">
<p id="button1_text">Animation</p>
</div>
  </div>
</body>

＆＃13;

Answer 1

请注意left适用于绝对定位元素。请尝试使用margin-left：

@keyframes slide {
 from { margin-left: 0px;}
 to { margin-left: 200px;}   
}

查看this以获取有关CSS动画的快速教程。它可能对您的任务有用。

<强>更新

以下代码有一些更改，我前面提到的，以及从javascript调用CSS动画的方式。

＆＃13;

function function1(){
  document.getElementById('front_page_blur').classList.add('slideAnim');    
}

＆＃13;

body{
  background-color:blue;
  }
.front_page_blur{
margin: auto;
width: 700px;
height: 425px;
background-color: rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 20px 9px black;
}
.slideAnim {
  animation-name: slide;
  animation-duration: 2s;
}
.button {
margin-left: 40px;
margin-right: 40px;
margin-top: 35px;
text-align: center;
width: 150px;
height: 150px;
border-radius: 10%;
display: inline-block;
}
#button1_text {
color: white;
font-family:Arial Black;
padding-top: 10px;
}
#button1{
background-color: rgba(0, 191, 255, 0.3);
z-index:2;
transition: background-color 0.3s ease-out;
}
#button1:hover {
background-color:rgba(0, 191, 255, 0.5);
transition: background-color 0.3s ease-in-out;
}
@keyframes slide {
 from {  margin-left: 0px;}
 to { margin-left: 200px;}
    
}

＆＃13;

<body>
<div class="front_page_blur" id="front_page_blur">
<h1 class="welcomeMSG">Welcome To TheFunction</h1>
<h1 class="welcomeMSG" id="welcomeMSG_U">Choose Your Destination</h1>
<div class="button" id="button1" onclick="function1()">
<p id="button1_text">Animation</p>
</div>
  </div>
</body>

＆＃13;

然而，这种动画只会在第一时间起作用。然后你需要找到一种方法来重新启动它（一个技巧可以完全从页面中删除元素并重新插入）。

如何使用onclick Javascript制作div幻灯片动画

1 个答案: