javascript - 为什么我的 ajax 加载新页面后我的 css 转换不开始？

Question

当我加载第一个页面时，我为我的 Transition 元素提供了一个新类“ready”，然后在第一次加载时启动 CSS 转换。然后我使用 ajax 为菜单链接加载一个新的 html 文档 - 但首先我在单击链接以反转转换时删除“就绪”类。这很好用。

问题:加载新的 html 文档时，我确保再次添加就绪类以在新页面上开始新的转换。我的问题是新文档似乎只加载了带有就绪类的元素，没有识别没有就绪类的元素的 CSS，因此不加载新页面的动画。为什么这不起作用？

演示:http://svensson.streetstylizm.com/尽你所能 - 在第一页开始过渡。然后单击“摄影”下的子菜单之一，您可以看到它会删除就绪类并在加载新页面之前反转转换，该页面没有工作转换。

代码:

$(function () {
  $('.v-line, .h-line, .nav, #ban_image img').addClass('ready');
});


$('li#menu-item-318 a').click(function(e){
  e.preventDefault(); 
  var linkNode = this;
  $('.v-line, .h-line, #ban_image img')
    .removeClass('ready')
    .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd   transitionend',   
         function(e) {
    $(".js-pageTransition").load("photo.html .test> *", function() {
      $('.v-line, .h-line, .nav, #ban_image img').addClass('ready');
    }); 
  });
});

Answer 1

缩进代码使它更容易。将 eventHandler 放在 ready 函数中。

$(function () {
  $('.v-line, .h-line, .nav, #ban_image img').addClass('ready');

  $('li#menu-item-318 a').click(function(e){
    e.preventDefault(); 
    var linkNode = this;
    $('.v-line, .h-line, #ban_image img')
      .removeClass('ready')
      .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd   transitionend',   
           function(e) {
      $(".js-pageTransition").load("photo.html .test> *", function() {
        $('.v-line, .h-line, .nav, #ban_image img').addClass('ready');
      }); 
    });
  });

});