Question

我希望通过使其位置固定来制作一个位于页面某个位置（并且绝对定位）的元素，并且我希望为过渡设置动画。

请参阅以下代码：

＆＃13;

$('.element').click(function(){
    $(this).css('left', this.getBoundingClientRect().left).css('top', this.getBoundingClientRect().top).toggleClass('fullscreen');
});

＆＃13;

body {padding: 50px;}
.container {position: relative; width: 100px; height: 100px; float: left;}
.element {position: absolute; top: 0px; left: 0px; width: inherit; height: inherit; transition: 0s;}
.element.fullscreen {position: fixed; top: 0px !important; left: 0px !important; width: 100%; height: 100%; transition: 1s;}

＆＃13;

<div class="container">
    <div class="element" style="background-color: red;"></div>
</div>
<div class="container">
    <div class="element" style="background-color: blue;"></div>
</div>
<div class="container">
    <div class="element" style="background-color: green;"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

＆＃13;

所以我首先设置元素当前所在的位置（左侧和顶部），然后添加fullscreen类。但是，jQuery css()方法的顺序在这种情况下很重要。如果首先设置left，那么它会从x轴上的正确点动画而不是y轴（它跳到顶部），如果先设置top，那么它是另一个四处走动（它跳到左边）。

为什么会这样，我怎样才能正确地为它们制作动画？

谢谢！

在全屏和动画之间切换

0 个答案: