css 如何动画定位固定？

gfttwv5a 于 2023-05-19 发布在其他

关注(0)|答案(3)|浏览(118)

我尝试设置一个1秒后修复的DIV的动画。但我做不到。我想在一秒钟后，名为“主页英雄模块”的div从右向左滑动。正如您在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);
});

css

来源：https://stackoverflow.com/questions/38918319/how-to-animate-to-position-fixed

3条答案

按热度按时间

dffbzjpn1#

您需要在position仍为绝对值时对宽度进行动画处理，然后将position设置为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');
});

赞(0）回复(0）举报 2023-05-19

ubby3x7f2#

已经工作，我猜，检查下面的片段，让我知道你的反馈.谢谢！

$(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>

赞(0）回复(0）举报 2023-05-19

wz3gfoph3#

你可以只使用CSS。检查CSS3 animation。

现场演示：

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>

赞(0）回复(0）举报 2023-05-19

我来回答

css 如何动画定位固定？

3条答案

相关问题

热门标签

最新问答