在两个页面之间转换相同的 html 元素答案

【问题标题】：Transition of the same html element between two pages在两个页面之间转换相同的 html 元素
【发布时间】：2020-02-01 21:17:34
【问题描述】：

我有四个不同的 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;

}

【问题讨论】：

不，不使用任何类型的 javascript 是不可能的。您需要以某种方式更改元素的状态。如果没有 javascript，你应该如何做到这一点？ Javascript 为页面带来交互。它是由 HTML 构建并由 CSS 着色/样式的房屋中的电线。

标签： css css-animations css-transitions

【解决方案1】：

如果您提供静态 HTML 页面，那么据我所知，不可能在两个页面之间“共享”一个元素。如果您单击链接以在页面之间切换，您可以：

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

【讨论】：