html 把窗口移出屏幕,html-过渡到全窗口(非屏幕)

问题是您将位置更改为固定位置,因此您的顶部/左侧值正在立即考虑跳跃.我也不认为有CSS解决方案可以通过仅在悬停时指定顶部/左侧来实现从静态位置到固定位置的过渡.转换的规则是具有初始值和最终值.

这里的想法是依靠一些JS来设置顶部/左侧值的初始值,并使过渡工作正常：

function getPosition(element) {

var xPosition = 0,

yPosition = 0;

while (element) {

xPosition += (element.offsetLeft + element.clientLeft);

yPosition += (element.offsetTop + element.clientTop);

element = element.offsetParent;

}

return {

x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),

y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)

};

}

var e=document.querySelector('.zoom');

var pos = getPosition(e);

e.style.left=pos.x+ 'px';

e.style.top=pos.y + 'px';

* {

box-sizing: border-box;

}

.zoom {

background-color: green;

width: 200px;

height: 200px;

margin: auto;

}

.zoom:hover {

transition: all 1s;

top: 0!important;

left: 0!important;

position: fixed;

width: 100%;

height: 100%;

}

Zoom on Hover

Hover over the div element.

为了更准确,您需要调整窗口滚动和窗口调整大小的值：

function getPosition(element) {

var xPosition = 0,

yPosition = 0;

while (element) {

xPosition += (element.offsetLeft + element.clientLeft);

yPosition += (element.offsetTop + element.clientTop);

element = element.offsetParent;

}

return {

x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),

y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)

};

}

var e = document.querySelector('.zoom');

var pos = getPosition(e);

e.style.left = pos.x + 'px';

e.style.top = pos.y + 'px';

window.addEventListener('scroll', function() {

var pos = getPosition(e);

e.style.left = pos.x + 'px';

e.style.top = pos.y + 'px';

});

window.addEventListener('resize', function() {

var pos = getPosition(e);

e.style.left = pos.x + 'px';

e.style.top = pos.y + 'px';

});

* {

box-sizing: border-box;

}

.zoom {

background-color: green;

width: 200px;

height: 200px;

margin: auto;

}

.zoom:hover {

transition: all 1s;

top: 0!important;

left: 0!important;

position: fixed;

width: 100%;

height: 100%;

}

Zoom on Hover

Hover over the div element.