为 HTML 页面之间的 JS“onclick”事件创建 CSS 转换答案

【问题标题】：Creating CSS Transition for JS "onclick" Event Between HTML Pages为 HTML 页面之间的 JS“onclick”事件创建 CSS 转换
【发布时间】：2021-03-17 15:39:20
【问题描述】：

我正在开发一个有 2 个“方面”的网站，一个是技术方面的，一个是社交方面的。我想添加一个按钮以在“双方”之间进行切换（即，如果您在社交“联系人”页面上并按下按钮，它会将您带到技术“联系人”页面）。

我的格式可以正常工作（例如，对于联系人，我有两个文件 tec-contact.html 和 soc-contact.html，以及一个具有属性 onclick="transitionToPage('soc-contact.html ')" 或 onclick="transitionToPage('tec-contact.html')" ）。这可以毫无问题地切换页面。

不过，我想要对其进行动画处理，使其绕 Y 轴旋转 180 度（同时显示两页）。目前我只能使用淡入淡出（with body {opacity: 0; transition: opacity 1s; }。

它建立在 Bootstrap 4 之上并具有 jQuery 3。

任何建议或意见将不胜感激！干杯！

【问题讨论】：

标签： html jquery css onclick css-transitions

【解决方案1】：

显然，有许多图书馆致力于这项任务；包括 Barba、Animsition 和 SmoothState。

我选择了 SmoothState。

https://github.com/miguel-perez/smoothState.js/

【讨论】：