如何为固定位置设置动画? [英] How to animate to position fixed?
本文介绍了如何为固定位置设置动画?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试为DIV制作动画,该动画在1秒后会固定。但是我做不到。我希望一秒钟后,名为 homepage-hero-module的div从右向左滑动。正如您在FIDDLE中看到的那样,它在一秒钟后变为固定状态。那么如何制作动画呢?
I try to animate a DIV that gets fixed after 1 second. But I can't make it done. I want after one second the div called "homepage-hero-module" to slide from right to left. As you can see in the FIDDLE it changes to fixed after one second. So How to animate this?
我尝试使用CSS,但是没有运气。
I tried with css, but no luck.
-webkit-transition: left 1s;
-moz-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
和
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
HTML代码:
<div class="container-fluid">
<div class="homepage-hero-module">
Container with data
</div>
</div>
CSS代码:
body, html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
.container-fluid {
width: 100%;
height: 100%;
position: relative;
}
.homepage-hero-module {
background: #DDD;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.fixed {
position: fixed;
top: 0px;
left: 0px;
width: 20px;
height: 100%;
background: red;
}
img {
height: 100%;
width: auto;
}
JS代码:
$(document).ready(function() {
setTimeout( function(){
$('.homepage-hero-module').addClass('fixed');
},1000);
});
推荐答案
在位置仍然是绝对值时,需要设置宽度的动画,然后将位置设置为固定
You need to animate the width while position is still absolute, and then set the position to fixed
<div class="container-fluid">
<div class="homepage-hero-module">
Container with data
</div>
</div>
body, html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
.container-fluid {
width: 100%;
height: 100%;
position: relative;
}
.homepage-hero-module {
background: #DDD;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
transition:all .2s ease;
}
.fixed {
top: 0px;
left: 0px;
width: 20px;
height: 100%;
background: red;
}
img {
height: 100%;
width: auto;
}
$(document).ready(function() {
setTimeout( function(){
$('.homepage-hero-module').addClass('fixed');
},1000);
$('.homepage-hero-module').css('position','fixed');
});
这篇关于如何为固定位置设置动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文