Javascript Smoothstate：同时显示新旧内容，以实现页面平滑过渡_Javascript_Jquery_Wordpress_Transition_Smoothstate.js

Javascript Smoothstate：同时显示新旧内容，以实现页面平滑过渡

javascript jquery wordpress

Javascript Smoothstate：同时显示新旧内容，以实现页面平滑过渡,javascript,jquery,wordpress,transition,smoothstate.js,Javascript,Jquery,Wordpress,Transition,Smoothstate.js,我正在wordpress项目中使用页面转换。要构建类似的转换，必须同时查看新内容和旧内容。根据提供的解决方案，我必须克隆当前的smoothstate容器正如在中一样，我遇到了相同的问题，内容重叠。例如：如果我从Page1导航到Page2，则Page1的克隆不会消失，但仍然可见。如果导航到第3页，则立即删除第1页的克隆（在animate.scrollTop之前）。但是在第3页上也可以看到第2页的克隆，依此类推作者假设选择错误是这种行为的原因，但我不知道我做错了什么以下是我的html结构：

我正在wordpress项目中使用页面转换。要构建类似的转换，必须同时查看新内容和旧内容。根据提供的解决方案，我必须克隆当前的smoothstate容器

正如在中一样，我遇到了相同的问题，内容重叠。例如：如果我从Page1导航到Page2，则Page1的克隆不会消失，但仍然可见。如果导航到第3页，则立即删除第1页的克隆（在animate.scrollTop之前）。但是在第3页上也可以看到第2页的克隆，依此类推

作者假设选择错误是这种行为的原因，但我不知道我做错了什么

以下是我的html结构：

<body <?php body_class(); ?>>
    <div id="main1" class="m-scene">
        <!-- Navigation links here -->
        <div class="sceneElement">
            <!-- Here is my content -->
        </div> <!-- end sceneElement -->
    </div> <!-- end #main1 -->
</body>

这里是.css

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.m-scene .sceneElement {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; 
}

.m-scene .sceneElement--fadeinright {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; 
}

.m-scene.is-exiting .sceneElement {
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse; 
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.m-scene .sceneElement {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; 
}

.m-scene .sceneElement--fadeinright {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; 
}

.m-scene.is-exiting .sceneElement {
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse; 
}