从显示块动画到显示内联答案

【问题标题】：animate from display block to display inline从显示块动画到显示内联
【发布时间】：2011-08-30 13:54:59
【问题描述】：

是否可以使用 jquery 或 jquery ui 将无序列表从显示块动画化到内联显示。那么列表会顺利转换为内联吗？

【问题讨论】：

是的，有可能。不，没有一种好的、简单的内置方法。
@Matt Ball 你应该回答:)

标签： jquery jquery-ui jquery-animate

【解决方案1】：

是的，这是可能的。不，没有一种好的、简单的内置方法。

【讨论】：

我认为写一个通用的动画是比较困难的。根据浏览器的不同，大量不同的 CSS 属性可以根据 display 进行更改，例如 top、left、height、width 等。

【解决方案2】：

这样的 animate() 调用是有效的。但是我们期望可能得到什么样的结果？以 100 步从 0 到 1000 的“top”动画每一步增加 10。块和内联之间的“步骤”/“切片”是什么？

【讨论】：

我不知道，我只是想知道是否有一个快速简单的方法......显然没有，我现在必须坐在这里搞乱定位=/
很抱歉......但我很想看看结果。非常鼓舞人心的想法。
如果我想出一种适用于许多场景的方法，我会发布答案:)

【解决方案3】：

我知道这是一个非常古老的问题，但是对于正在查看此线程的人来说，您现在可以向块属性添加自定义动画。

.subnav-is-opened .main-nav__secondary-nav {
   display: block;
   -webkit-animation: showNav 250ms ease-in-out both;
   -animation: showNav 250ms ease-in-out both;
 }

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from {opacity: 0;}
    to {opacity: 1;}
}

演示 - https://developers.google.com/web/fundamentals/

【讨论】：