Javascript css marginTop转换未通过动画触发_Javascript_Css_Transition

Javascript css marginTop转换未通过动画触发

javascript css

Javascript css marginTop转换未通过动画触发,javascript,css,transition,Javascript,Css,Transition,我有一个id为#navigation的导航栏，通过css将id的边距设置为-100，因此在页面加载时它不可见，然后我在id中添加了一个onLoad侦听器。然后我编写了一些js将id转换回可见状态。问题是JS没有将id转换回页面，它只是在页面加载时显示，但没有id转换回页面的动画 HTML <body onLoad="navBack()"> <section id="navigation"> <nav> <ul id="navList"&g

我有一个id为

#navigation

的导航栏，通过css将id的边距设置为-100，因此在页面加载时它不可见，然后我在id中添加了一个onLoad侦听器。然后我编写了一些js将id转换回可见状态。问题是JS没有将id转换回页面，它只是在页面加载时显示，但没有id转换回页面的动画

HTML

<body onLoad="navBack()">
<section id="navigation">
  <nav>
      <ul id="navList">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
  </nav>
</section>
</body>

marginTop

是css属性，而不是

marginTop

请您提供一把小提琴好吗？当然，这是jsfiddle链接，这是您的预期行为吗？这是我目前得到的结果，导航栏上显示的是10px的边距。我的目标是从-100px下降到10px

function navBack(){
   var element = document.getElementById('navigation');
   element.style.transition = "marginTop 6.0s linear 6.0s";
   element.style.marginTop = "10px";
     }

element.style.transition = "margin-top 6.0s linear";