Javascript css marginTop transition not triggering with animation

Question

I have a navigation bar with the id of #navigation , trough css the id has its margins set to -100 so it is not visible when the page loads, I then added a onLoad listener to the id. Then I wrote some js to transition the id back to be visible. The issue is that the JS does not transition the id back, it simply shows it when the page loads but there is no animation of the id transitioning back down.

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>

Here is the 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 is the css property not marginTop

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

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

Javascript css marginTop transition not triggering with animation

Question

1 answers

solution1
0 2014-03-06 03:44:00

Javascript css marginTop transition not triggering with animation

Question

1 answers

solution1 0 2014-03-06 03:44:00

solution1
0 2014-03-06 03:44:00