动画元素属性与过渡

Question

JSFiddle

我试图为弹出菜单设置动画。

我在屏幕外的ul元素上有这个：

top: 40px; //hidden off bottom of page
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;

在悬停时我：

bottom: 40px;
top: auto;

但这不是动画 - 为什么？

Answer 1

因为您的bottom属性未在班级初始化。

更改此

#filter >ul >li >ul{
position: absolute;
top: 40px;
...

到此

#filter >ul >li >ul{
position: absolute;
top: 40px;
bottom: 0;
...

<强> Fiddle Here

您的属性应初始化为＆＃34;默认值＆＃34;做一个正确的动画。只是自己做一些不同属性的测试，你就会发现。

---

正如 OP 所说，这打破了他的想要的动画（尽管问题是为什么代码没有动画）

top和bottom是两个相反的属性，根据你想要的动画，你应该考虑一个comprimise。的 Like this one

只需删除top并将bottom默认值设置为较低的负值，然后在悬停时设置为bottom: 0。

我个人不喜欢这样，但它确实有效。您应该注意该默认值：如果您在菜单中添加更多<li>，则必须再次计算。