javascript - 从 margin-left :-9999px to the page? 移动元素时如何进行平滑过渡

标签 javascript jquery css

这里有更多详细信息 - 由于 YouTube API 的一些奇怪限制,我被迫将容器从页面中推出以给人隐藏容器的印象。

我通过使用这个类实现了这一点:

.my_hide{
    margin-left:-9999px;
    position:fixed !important;
}

并且通过使用 JQuery 方法 $("player-list_container").removeClass("my_hide")$("player-list_container").addClass("my_hide") 来控制切换。

但是,切换看起来很活泼,一旦类被删除,容器就会跳起来。我希望能够顺利地从一种状态过渡到另一种状态,但不知道该怎么做。

此行为 can be demonstrated here

通过输入并搜索任何内容来添加视频,然后点击下方的“播放”按钮。您应该观察所描述的行为。

最佳答案

我假设您“不能”/“不想”手动隐藏容器,但想更改其位置,使其位于页面边界之外,看起来隐藏起来。

在这种情况下,更改 position 属性肯定会给您带来跳跃而不是平滑的效果,因为这会影响页面的整个布局 (Read more)。您可以改为使用 CSS3 动画的 translate 属性更改其位置。

这是我编写的一个演示,它完全符合您的要求。 http://codepen.io/anon/pen/EgcIi

“单击我”按钮可以在关闭和打开页面之间切换容器,并且可以顺利完成。您还可以调整更改容器位置所需的时间。 (截至目前为 500 毫秒)

关于javascript - 从 margin-left :-9999px to the page? 移动元素时如何进行平滑过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20930295/

相关文章:

javascript - 在 HTML 中运行 JavaScript

javascript - 等待 ES6 模块中的文档准备就绪

javascript - Android 7.0 及以上版本 Javascript 无法正常工作 Webview

javascript - 需要一些 TinyMCE jQuery 帮助

javascript - 如何制作标签菜单

python - 尝试在 Django Post LIKE DISLIKE 功能上使用 Ajax 时出现页面未找到错误

javascript - 更改 div 中单个列表项的边距

javascript - 如何在html中的按钮中显示下拉选择?

javascript - 具有缓动和触摸功能的滚动条插件

html - 尝试定位相对于观察点固定的多个重复元素