这里有更多详细信息 - 由于 YouTube API 的一些奇怪限制,我被迫将容器从页面中推出以给人隐藏容器的印象。
我通过使用这个类实现了这一点:
.my_hide{
margin-left:-9999px;
position:fixed !important;
}
并且通过使用 JQuery 方法 $("player-list_container").removeClass("my_hide")
和 $("player-list_container").addClass("my_hide")
来控制切换。
但是,切换看起来很活泼,一旦类被删除,容器就会跳起来。我希望能够顺利地从一种状态过渡到另一种状态,但不知道该怎么做。
通过输入并搜索任何内容来添加视频,然后点击下方的“播放”按钮。您应该观察所描述的行为。
最佳答案
我假设您“不能”/“不想”手动隐藏容器,但想更改其位置,使其位于页面边界之外,看起来隐藏起来。
在这种情况下,更改 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/