【问题标题】:CSS Transition happening instantaneously [closed]CSS过渡瞬间发生[关闭]
【发布时间】:2013-06-11 16:17:48
【问题描述】:

我正在 Mod.it 网站上开发一个 JavaScript 工具,并且出于某种原因,每当我尝试进行 CSS 转换(通过将新的 CSS 样式应用于具有转换属性的 div)时,它就会立即发生程序启动(我怀疑在编译时)。我希望它在运行时发生,但我设法做到这一点的唯一方法是将超时设置为小于一毫秒,这是唯一有效的方法。

如果您查看下面的 mod,您会注意到注释掉超时将删除动画。如果某些代码没有意义,请随意查看 modit-ui 库(位于代码选项卡中)。

https://mod.it/KDWeFcYD

如果有人可以帮助我在无需设置超时的情况下进行 CSS 过渡,这样更简洁,我将不胜感激。

【问题讨论】:

  • Javascript“运行时”是你加载页面的时候,所以你的问题没有多大意义;浏览器应用程序没有单独的“编译时间”。如果您希望响应用户执行某项操作而发生某事,请将其放入事件处理程序中。
  • @Quentin - 这不是我正在开发的网站,它只是 Mod.it 编译器中的一个应用程序。我粘贴了链接,以便其他人可以了解“MODIT.ui”内容的来源,因此他们可以看到我试图解决的问题的演示
  • @Barmar - 是的,我的措辞很糟糕。我的意思是,在我正在开发的大型应用程序中,我正在使用事件处理程序来触发 CSS 更改——这只是一个展示我的问题的小演示。处理程序正确触发,但 CSS 没有动画,我的问题是如何解决这个问题

标签: javascript css css-transitions


【解决方案1】:

等等,让我说清楚...

您有一个黑盒子,并希望它在页面加载时向上移动?

在这种情况下,将黑盒设置为静态 CSS(不是在 JavaScript 函数中编写的),用于黑盒的原始状态(原始位置等)。

然后,在调用主函数时,将框设置为新样式。

【讨论】:

  • 嗯,这听起来是个好主意,但在 Mod.it,最好是所有代码,甚至 CSS,都是动态生成的。我确实想到了那个解决方案,但想知道除了超时和静态 css 之外是否还有其他可能完成的事情?
猜你喜欢
  • 1970-01-01
  • 2014-04-21
  • 1970-01-01
  • 2013-05-30
  • 2019-01-17
  • 1970-01-01
  • 2017-12-25
  • 1970-01-01
  • 2014-06-11
相关资源
最近更新 更多