Question

尝试为此框设置动画以全屏显示，但由于我在动画开始前将位置设置为固定，因此框会向左上角拍摄。

相反，有没有办法让它从起始位置扩展？

＆＃13;

setTimeout(function() {
  $('.test').css({
    position: 'fixed',
    top: 0,
    left: 0,
    margin: 0
  });
    
  $('.test').animate({
    height: $(window).height(),
    width: $(window).width()
  }, 200);
}, 2000);

＆＃13;

.test {
    margin: 0 50px;
    background: blue;
    height: 200px;
    width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="test"></div>

＆＃13;

Answer 1

我会混淆一些CSS和JS。试试这个： DEMO FIDDLE

JS：

$('.test').css({
    'top': $('.test').position().top,
});

setTimeout(function () {
    $('.test').addClass("full_screen");
}, 2000);


setTimeout(function () {
    $('.test').removeClass("full_screen");
}, 8000);

CSS：

html, body {
    width: 100%;
    height: 100%;
    position:relative;
}
.test {
    position: absolute;
    margin: 0 50px;
    background: #ccc;
    height: 200px;
    width: 200px;
    transition: all 4s;
}
.full_screen {
    top: 0px !important;
    height: 100%;
    width: 100%;
    margin: 0;
}

位置固定的动画，没有＆＃34;拍摄＆＃34;

1 个答案: