如何动画定位固定？

Question

我尝试为 1 秒后修复的 DIV 设置动画。但我做不到。我希望一秒钟后名为“homepage-hero-module”的 div 从右向左滑动。正如您在 FIDDLE 中看到的那样，它在一秒钟后变为 fixed。那么如何制作动画呢？

我尝试使用 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;

小提琴

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

原文由 AndrewS 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 jshawl 发布，翻译遵循 CC BY-SA 3.0 许可协议

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>

原文由 kukkuz 发布，翻译遵循 CC BY-SA 3.0 许可协议