Question

我已经实现了使用div class="transition"在jquery中进行页面转换并将所有要动画的内容放入其中的功能。问题是我在每个页面上都有不同的JS触发了不同的元素。因此，过渡脚本完全可以正常运行，而其他脚本则不能。因此，我尝试将它们放入div class="transition"中，但没有一个起作用。

它们是进行页面转换的一种解决方法还是更好的方法？

这是页面转换：

let isAnimating;

$('a').on('click', function(event){
  event.preventDefault();
  let newPageUrl = $(this).attr('href');
  if( !isAnimating ) changePage(newPageUrl);
});



function changePage(url) {
  $("header a").removeClass("enCours");
  isAnimating = true;
  $( ".transition" ).animate({
      opacity: 0,
      top : "-15vh"
    }, 500, function() {
     loadNewContent(url);
  });
}


function loadNewContent(url) {
  if(url != window.location){
        window.history.pushState({path: url},'',url);
      }

  $.ajax({
    url: url,
    success: function (data) {
      const newContent = $(data).filter(".transition").html();
      $(".transition").html(newContent);
      console.log(url);

      checkColorPage(url);
      if (typeof root == undefined) {
        const root = document.documentElement;
      };
      root.style.setProperty("--gris", "#232323");
      root.style.setProperty("--white", "white");

      $( ".transition" ).animate({
          opacity: 0,
          top : "15vh"
        }, 0, function() {
          $( ".transition" ).animate({
            opacity: 1,
            top : 0
          }, 500);
        });



      isAnimating = false;
    }
  });
}


$(window).on('popstate', function() {
  let newPageArray = location.pathname.split('/'),
  newPageUrl = newPageArray[newPageArray.length - 1];
  console.log(newPageArray);
  headerTitles = document.querySelectorAll("a");
  headerTitles.forEach(element =>{
    let compareUrl = element.getAttribute('href');
    if(newPageUrl === compareUrl){
      newHeaderLink = element;
    };
  })
  if( !isAnimating ) changePage(newHeaderLink, newPageUrl);
});

这是我的html的两个不同示例：

<body>

<header class="header">
  Here is my header which is not on the transition div
</header>

<div class="transition">
    <section>
       Here is my content
    </section>
</div>

//Notice there are different scripts
<script type="text/javascript" src="js/slider.js"></script>

<script type="text/javascript" src="js/colorPage.js"></script>
<script src="js/transition.js"></script>

</body>

第二页

<body>

<header class="header">
   Here is my header which is not on the transition div
</header>

<div class="transition">
    <section>
       Here is my content
    </section>
</div>

//Notice there are different scripts
<script type="text/javascript" src="js/projectLink.js"></script>

<script type="text/javascript" src="js/colorPage.js"></script>
<script src="js/transition.js"></script>

</body>

Ps：我是一个自学成才的开发人员，因此您可能会看到一些可怕的东西。不要犹豫，纠正我，这是我学习的唯一途径！

页面过渡和JavaScript

0 个答案: