如何动画定位固定？

Question

我尝试动画一个在1秒后修复的DIV。 但我无法完成它。 我希望在一秒之后，div称为“homepage-hero-module”从右向左滑动。 正如您在FIDDLE中看到的那样，它会在一秒后变为固定。 那么如何动画呢？

我试过用css，但没有运气。

-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;

的jsfiddle

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);
});    

Answer 1

您需要在位置仍为绝对值时为宽度设置动画，然后将位置设置为固定

<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');
});   

Answer 2

已经工作了，我想，请查看以下代码段并告诉我您的反馈意见。 谢谢！

 $(document).ready(function() { setTimeout(function() { $('.homepage-hero-module').addClass('fixed'); }, 1000); }); 

 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; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } img { height: 100%; width: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid"> <div class="homepage-hero-module"> Container with data </div> </div> 

Answer 3

你可以用CSS做到这一点。 检查CSS3 动画 。

现场演示：

 body, html { margin: 0px; padding: 0px; width: 100%; min-height: 100%; } .container-fluid { width: 100%; height: 100%; position: relative; } .homepage-hero-module { width: 100%; height: 100vh; position: absolute; top: 0px; left: 0px; background-color: #f5f5f5; animation: slideleft 1s 0.3s ease-out forwards; } img { height: 100%; width: auto; } @keyframes slideleft { to { background: coral; width: 70px; position: fixed; } } 

 <div class="container-fluid"> <div class="homepage-hero-module"> Container with data </div> </div>