同一 html 元素在两个页面之间的过渡

Question

我有四个不同的html页面，我正在尝试使用相同的html元素(一个圆圈(制作动画。 如何从一个页面平滑过渡到另一个页面(滚动或单击链接(，显示元素从一个地方到另一个地方的动画，而不是它只是加载在那里？没有javascript框架可能吗？

例

第 1 页

<div class="circlepage1"></div>

.circlepage1{
width: 90px;
height: 90px;
border-radius: 50%;
border: 0.09em solid #707070;
position: absolute;
top: 313px;
right: 688px;
}

第 2 页

<div class="circlepage2"></div> 


.circlepage2{
width: 320px;
height: 320px;
border-radius: 50%;
border: 1px solid #707070;
position: fixed;
right: 130px;
top: 220px;
}

Answer 1

如果您正在提供静态HTML页面，那么据我所知，不可能在两个页面之间"共享"一个元素。如果您点击链接以在页面之间过渡，则可以：

将

1. onClick事件侦听器添加到链接，以使用event.preventDefault()截获页面更改。
2. 将document.location.href = nextPageUrl附加到元素上的animationEnd事件侦听器。
3. 对元素进行动画处理，使其与下一页上比较元素的外观相匹配。