Question

我有一个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>

这是JS

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

Answer 1

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

margin-top是css属性而不是marginTop

http://jsfiddle.net/w9Cwx/11/

http://jsfiddle.net/w9Cwx/13/

Javascript css marginTop过渡不会触发动画

1 个答案: