gpt4 book ai didi

Javascript css marginTop 过渡不触发动画

转载 作者:行者123 更新时间:2023-11-28 11:06:48 25 4
gpt4 key购买 nike

我有一个 ID 为 #navigation 的导航栏,通过 css,id 的边距设置为 -100,因此在页面加载时它不可见,然后我添加了一个 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";
}

最佳答案

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 过渡不触发动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22213682/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com