在Javascript行为不稳定的两种状态之间应用转换

我很难理解为什么转换没有按预期进行。它应该应用“from”，然后将“transition”添加到“el”，然后它应该运行“to”，最后是onTransitionEnd它应该运行“callback”（前面有一段代码，用于清除转换属性）

在Webkit浏览器中，它可以正确地向下滑动，但slideUp是即时的。Firefox中的情况正好相反

伯格

JSFiddle：

var$=函数（查询）{
变量a=[]，
n=document.querySelectorAll（查询），
l=n.长度；
对于（var i=0；i1）{returna；}或者{returna[0]；}
},
$id=函数（查询）{return document.getElementById（查询）；}，
getSupportedPropertyName=函数（属性）{
对于（var i=0；i

在某些浏览器中，您不能只设置初始状态，设置最终状态，然后期望CSS转换工作

相反，必须先设置初始状态，然后再渲染它，然后才能设置最终状态并期望运行转换。使其呈现的最简单方法是返回到事件循环，然后在调用

setTimeout（）

后执行任何进一步的处理（如设置最终状态）。

试试这个：（在chrome和ff中测试）

首先：做jfriend00:

在过渡函数中：

transition = function (opts) {
    ..
    setTimeout(function() {
        opts.to && opts.to();
    }, 1)
}

second:在您的

slideDown（）方法中不需要回调。

方法：

slideDown = function (el, t) {
    ..
    take this out:
      /*callback: function (event) {
            event.target.style.height = "";
        }*/
    });

从设计的角度来看。。回调函数没有添加任何值。。当涉及到转换时，您应该从您停止的地方继续

---

第三步：当幻灯片已经放下时，禁用幻灯片放下。。但是我会把这个留给你。

嘿，伙计，我花了两个小时回答你的问题：p请让我知道我的工作是否为你工作……谢谢。还有一个bug。。。我会试着弄清楚为什么会发生这种情况……当我试着点击li's中的h3时，它仍然是不确定的，有时会中断（即时打开和关闭），回调就在那里，因为如果我用设置的高度调整窗口的大小，布局就会出错。（文本将从介绍的底部剪掉，或者介绍和其他部分之间会有一个巨大的差距，因为它记得高度。）超时是我尝试过的，但对我来说不起作用（我有50毫秒），但现在它确实起作用了…谢谢。。。最后，当我试着点击李的h3时，它仍然不确定，有时会中断。。。想法？好吧，在这一点上（在花了那么多时间试图解决我们的问题之后……却发现它引入了另一个问题）。。我可以问你为什么要在这里重新发明轮子吗？您遇到了一些棘手的跨浏览器问题，需要处理事件循环、计时器、动态特定于供应商的css转换等，以创建一种转换效果，使数百万个已就绪、已测试和跨浏览器的在线实现？jqueryui或bootstrap等解决了这个问题

slideDown = function (el, t) {
    ..
    take this out:
      /*callback: function (event) {
            event.target.style.height = "";
        }*/
    });