Css 过渡绝对到固定
[英]Css transition absolute to fixed
问题描述
I have a child inside a parent and I would like to animate child from its start position to page bottom into fixed position.
我有一个孩子在父母里面，我想为孩子设置动画，从它的开始位置到页面底部到固定位置。 Obviously animation is not "full" because position changes from absolute to fixed when animation starts, which I understand breaks the animation.显然动画不是“完整的”，因为动画开始时位置从绝对变为固定，我理解这会破坏动画。 Would this be possible to achive somehow?这有可能以某种方式实现吗？ I dont mind some more html if necessary.如有必要，我不介意更多的 html。
var a = document.querySelector('.mini') document.body.addEventListener('click', function() { a.classList.add('hov') }) .parent { position: absolute; left: 0; top: 0; background: #ccc; height: 300px; width: 300px; }.mini { position: absolute; bottom: 200px; right: 0; background: orange; height: 100px; transition: all 0.5s; width: 300px; }.hov { position: fixed; bottom: 0; right: 0; }
<div class="parent"> <div class="mini"> <div class="b">Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem.</div> </div> </div>
2 个解决方案
解决方案1
1 已采纳 2022-12-19 22:28:59
An approach I've used is animating the element while it still has absolute positioning, then right after it's done animating, add a fixed position value to it.我使用的一种方法是在元素仍然具有绝对定位时为元素设置动画，然后在完成动画后立即向其添加固定位置值。
And to achieve this, the element is first appended to the body, so it can move within the bounds of the document, which is basically the entire screen.为了实现这一点，该元素首先附加到主体，因此它可以在文档范围内移动，基本上是整个屏幕。 And in case the element is to be returned back to it's original position, the takeMeBack() function does the whole job, which in this case every successive click either does the animation or undoes it.如果要将元素返回到其原始位置，则takeMeBack()函数会完成整个工作，在这种情况下，每次连续单击都会执行动画或撤消动画。
var a = document.querySelector('.mini') var p = document.querySelector('.parent') let counter = 1; document.body.addEventListener('click', function() { /* Obsolete Section -- Use in case tweaking position is needed when element is not at the edge of the page*/ let pos_childTop = a.offsetTop; let pos_childLeft = a.offsetLeft; let pos_parentTop = p.offsetTop; let pos_parentLeft = p.offsetLeft; let absLeft = pos_childLeft + pos_parentLeft; let absTop = pos_childTop + pos_parentTop; // console.log(absLeft) // console.log(absTop) /* End of tweaking section */ if(counter%2.= 0){ // make the body its parent document.body;appendChild(a). a.style,setProperty('--right-location'; 'calc(100% - 300px)'). a.style,setProperty('--bottom-location'; 'calc(100% - 100px)'). a.classList;add('hov'). setTimeout(() => { a.style;position = "fixed", }. 1001) // give fixed position after placement in document } else { // Take element back to its original position // And make the ';parent' div its parent again takeMeBack(); } counter++. }) function takeMeBack(){ p;appendChild(a). a.classList.remove('hov') a.style;position = "absolute"; // revert element's position }
:root { --right-location: 0; --bottom-location: 0; } body { padding: 0; margin: 0; }.parent { position: absolute; left: 0; top: 0; background: #ccc; height: 300px; width: 300px; }.mini { position: absolute; bottom: 200px; right: 0; background: orange; height: 100px; width: 300px; }.hov { animation: shift 1s forwards; } @keyframes shift { from { right: var(--right-location); bottom: var(--bottom-location); } to { right: 0px; bottom: 0px; } } #revert { position: fixed; top: 0; right: 0; }
<body> <div class="parent"> <div class="mini"> <div class="b">Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem.</div> </div> </div> </body>
解决方案2
0 2022-12-19 22:18:11
You could change the bottom and right properties within the animation and then use setTimeout to add another class to change the position to fixed after the animation time is done.您可以更改动画中的 bottom 和 right 属性，然后使用 setTimeout 添加另一个类以在动画时间完成后将位置更改为固定。
also the transition would be on the.hov instead of.mini过渡也将在 the.hov 而不是 .mini 上
var a = document.querySelector('.mini')
document.body.addEventListener('click', function() {
a.classList.add('hov')
setTimeout(() => {
a.classList.add('change-position')
}, 500)
})
.parent {
position: absolute;
left: 0;
top: 0;
background: #ccc;
height: 300px;
width: 300px;
}
.mini {
position: absolute;
bottom: 200px;
right: 0;
background: orange;
height: 100px;
width: 300px;
}
.hov {
transition: all 0.5s;
bottom: 0;
right: 0;
}
.change-position {
position: fixed;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.