css - CSS 相对于固定位置 - CSS 过渡

Question

描述

我正在尝试使 div 看起来像是从它所在的位置生长的。为此，我将位置从相对更改为固定，这使得第一个过渡从top:0, left:0元素的当前顶部/左侧开始。如何解决此问题以使用元素当前偏移量？

注意：第一次点击后，代码完全按照我想要的方式工作。第一次点击就是问题所在。

score 8 · Accepted Answer

你好，谢谢你的小提琴，

看起来当您第一次在此处设置 css 时，除了在 click 函数中设置初始位置之外，您的 target-div 上还有一些过渡，这有点搞砸了。

$(this).css({
    position:'fixed',
    top:$(this).offset().top,
    left:$(this).offset().left
});

在点击功能触发之前设置目标div的位置将正确定位div，并应用没有动画的css将确保目标div在文档加载时位于正确的位置（如果你保留动画在那个目标 div 上，即使你在 $(document).ready 中应用起始 css，它也会加载页面并运行动画，而不是让 div 从那里开始）。

我为动画使用了一个单独的类，并且仅在设置了初始定位后才应用它（参见下面小提琴中的 .test 类）。