我有一个元素,其CSS属性设置为
当单击该元素时,我想将其“扩大和移动”到屏幕中心。
我所知道的在页面中心定位一个元素的最佳解决方案是:
position: fixed;
在页面的右上角。当单击该元素时,我想将其“扩大和移动”到屏幕中心。
我所知道的在页面中心定位一个元素的最佳解决方案是:
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
如果我最初使用top
和left
属性设置元素的位置,则一切都很好,但是如果最初使用right
而不是left
来定位元素,则在动画中会出现不良跳跃。
const myFunc = function() {
let f = document.getElementById('element')
if (f.className.includes('bar')) {
f.className = 'foo'
} else {
f.className = 'foo bar'
}
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
}
.foo {
position: fixed;
top: 20px;
right: 20px;
width: 200px;
height: 50px;
background-color: blue;
transition: 0.5s all;
}
.bar {
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
background-color: red;
transform: translate(-50%, -50%);
transition: 0.5s all;
}
<div class="wrapper">
<div class="foo" id="element" onclick="myFunc()">
</div>
</div>
如何消除动画在水平中心的初始跳跃?(即,我希望反转“缩小到右上角”的效果,在那里一切正常)。
right
时,您可以使用top: 50%; right: 50%; transform: translate(50%, -50%);
吗? - kukkuz