[英]Final position after CSS3 animation doesn't stick when using vh units and resizing browser window
I have an image that is absolutely positioned using vh
units. 我有一个使用
vh
单位绝对定位的图像。 I want to animate this positioning use CSS. 我想动画这个定位使用CSS。 When doing so, however, the relative nature of
vh
units seems to be lost. 然而,当这样做时,
vh
单位的相对性质似乎丢失了。 To illustrate, look at the following two examples. 为了说明,请看以下两个例子。 In both of them, drag the bottom of your browser up and down to change its height.
在它们两者中,上下拖动浏览器底部以更改其高度。
The positioning adjusts correctly in relation to the screen height. 定位相对于屏幕高度正确调整。
http://codepen.io/maxedison/pen/jPOQPW http://codepen.io/maxedison/pen/jPOQPW
#mountain { position: absolute; left: 50%; top: 55vh; opacity: 1; } img { width: 180vh; margin-left: -50%; }
<div id="screen1"> <div id="mountain"> <img src="http://upload.wikimedia.org/wikipedia/commons/2/20/Red_Slate_Mountain_1.jpg"> </div> </div>
Animation 动画
The positioning does NOT adjust at all. 定位根本不调整。 It's like the
vh
unites have turned into static px
, maintaining the same distance from the top of the window regardless of screen height. 就像
vh
单位已变成静态px
,无论屏幕高度如何,都与窗口顶部保持相同的距离。
http://codepen.io/maxedison/pen/QbWJbj http://codepen.io/maxedison/pen/QbWJbj
#mountain { position: absolute; left: 50%; top: 100vh; opacity: 0; -webkit-animation: lincoln_page_load 2s ease forwards; animation: lincoln_page_load 2s ease forwards; } img { width: 180vh; margin-left: -50%; } @-webkit-keyframes lincoln_page_load { to { opacity: 1; top: 55vh } } @keyframes lincoln_page_load { to { opacity: 1; top: 55vh } }
<div id="screen1"> <div id="mountain"> <img src="http://upload.wikimedia.org/wikipedia/commons/2/20/Red_Slate_Mountain_1.jpg"> </div> </div>
Any ideas on how to correct this? 有关如何纠正此问题的任何想法? I know I can resort to JavaScript to make this work :)
我知道我可以使用JavaScript来完成这项工作:)
This is only a problem when the animation is paused with forwards
and the animation is still active: 当动画暂停
forwards
且动画仍处于活动状态时,这只是一个问题:
Place the top: 55vh
in #mountain
so that when the animation ends it has this value and remove the opacity: 0
将
top: 55vh
放在#mountain
这样当动画结束时它具有此值并删除opacity: 0
Remove forwards
so that the animation is completed forwards
移除以便完成动画
Add the opacity: 0
and top: 100vh
to from
in the keyframes so that these values are present when the page loads 添加
opacity: 0
和top: 100vh
到from
在关键帧,使这些值出现在页面加载时
This has the added benefit of showing the image if the browser does not support the animation
property. 如果浏览器不支持
animation
属性,则还具有显示图像的额外好处。
Codepen Example with SASS (Auto-prefixer is turned on) SASS的Codepen示例 (自动前缀已打开)
Here is another example using a transform — translate
( info link ) — which seems to provide a slightly smoother animation. 这是另一个使用变换的例子 -
translate
( 信息链接 ) - 这似乎提供了一个稍微平滑的动画。
#mountain { position: absolute; left: 50%; top: 55vh; -webkit-animation: lincoln_page_load 2s ease; animation: lincoln_page_load 2s ease; } img { width: 180vh; margin-left: -50%; } @-webkit-keyframes lincoln_page_load { from { top: 100vh; opacity: 0; } to { opacity: 1; top: 55vh } } @keyframes lincoln_page_load { from { top: 100vh; opacity: 0; } to { opacity: 1; top: 55vh } }
<div id="screen1"> <div id="mountain"> <img src="http://upload.wikimedia.org/wikipedia/commons/2/20/Red_Slate_Mountain_1.jpg"> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.