Question

我真的很困

由于某种原因，每当我使用style.animatonDuration代码向其div标签中添加css属性时，该方法均无效。我要使正方形的持续时间为五秒，然后向左移动。

这是我的JavaScript代码

function Action(){
console.log("hello");
var age;
var name;
var time;
var have
age=document.getElementById("flo").value;
name=document.getElementById("coo").value;
time=document.getElementById("yo").value;
var danimation=document.querySelector("#yos");


var ac=0;
var a=0;
var b=0;
var c=0;
var d=0;


    if (isNaN(age))
    {

    a=1;

    }
    else
    {
    if (age<18)
    {



    b=1;
    ac=1;
    }


}




 if (isNaN(time))
 {
 c=1;



 }
 else {
    if (time>10 || time<1)
        d=1;



}


    if (a==1 && c==1){


    alert("Both variables for time and age are not numbers.  Please enter in a number");


}

else if (a==1 || c==1)
{
    alert("Please check your time and age input to see if they are both numbers!");


}

else {
        if (ac==1 && d==1)
        {
            alert("Not only are you not old enough, but you choose wrong time variables");

        }

        else if (ac==1)
            alert("You are not old enough");

        else if (d==1)
            alert("Please enter a number between 1 and 10");

    }





 if (a==0 && b==0 && c==0 && d==0)
{

console.log("Alright, this is correct");
document.getElementById("results").innerHTML="Alright  "+name+ ", this will 
run for "+time + " seconds";

(here is the problem.  I'm trying to add a css property that animations the yos div tag.  It works with someone like danimation.style.backgroundColor but it doesn't work for this one.)    
danimation.style.animationDuration="5s";
danimation.style.height="100px";
 }




   }

这是我的CSS代码

#yos{

border-style:solid;
top:80%;
height: 50px;
width: 50px;
position: absolute;
animation name: example




  }


  @keyframes example{
0% {left: 0px;}
70%  {left: 200px;}


  }


  h1{

text-align: center;


}
 #identify{

text-align:center;
}


.container{

border-style: dotted;
width: 800px;
height: 400px;
position: absolute;
right: 550px;

}

.ind{
float:left;

position:relative;
top: 20%;
padding: 40px;
left:200px;
width: 60px;

}

 .ident{
 position:relative;
 display:inline;
 float: left;
 text-align:center;

 padding: 10px;

 }
 #one.ind{

  background-color:yellow;
  }
  #two.ind{
  background-color:blue;


 }

 #three.ind{
background-color:red;
 }
form {


position: absolute;
top: 60%;
right: 120px;

 }
button{

 position: absolute;
 top: 70%;
 right: 45%;

 }

 #results {
 top: 60%;
 right:50%;
position: absolute;

}

这是我的html

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="project" content="hello">
<title></title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="2css.css">
<h1>Set the distance!</h1>
<p id="identify">To play this game, you must be at least 18 years old.  You 
must also fill out some information.</p>

<div class="container">
<div class="ind" id="one"><p id="mee">Name</p></div>
<div class="ind" id="two"><p id="metoo">Age</p></div>
<div class="ind" id="three" ><p id="methree">Time(seconds)</p></div>

<form>
<input type="textbox" id="coo" class="texts">
<input type="textbox" id="flo" class="texts">
<input type="textbox" id="yo" class="texts">

</form>


<button onclick="Action();">Click to calculate</button>

</div>
<script type="text/javascript" src="Application.js"></script>
<p id="results" value="yo">Hey</p>

<div id="yos">
</div>

我正在尝试将ID为yos的div标签向右移动约5秒钟。当我执行诸如style.backgroundcolor =“ blue”之类的操作时，它会起作用。但这不适用于动画。有人知道为什么吗？

Answer 1

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {left:0%;}
  100% {left:100%;}
}

/* Standard syntax */
@keyframes example {
  0%   {left:0%;}
  100% {left:100%;}
}

style.animationDuration不适用于javascript。尝试使用javascript添加CSS属性

1 个答案: