我尝试为 1 秒后修复的 DIV 制作动画。但我做不到。我希望一秒钟后名为“homepage-hero-module”的 div 从右向左滑动。正如您在 FIDDLE 中看到的那样,它在一秒钟后变为固定。那么如何制作动画呢?
我尝试使用 css,但没有成功。
-webkit-transition: left 1s;
-moz-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
and
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
JSFIDDLE https://jsfiddle.net/0ydtmLLj/
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 code:
$(document).ready(function() {
setTimeout( function(){
$('.homepage-hero-module').addClass('fixed');
},1000);
});
您需要在位置仍然是绝对的情况下对宽度进行动画处理,然后将位置设置为固定
<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');
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)