为什么我的 ajax 加载新页面后我的 css 转换不会开始？答案

【问题标题】：Why wont my css transition start after I ajax load a new page?为什么我的 ajax 加载新页面后我的 css 转换不会开始？
【发布时间】：2015-09-13 11:29:28
【问题描述】：

当我加载第一页时，我给我的过渡元素一个新类“准备好”，然后在第一次加载时启动 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');
    }); 
  });
});

【问题讨论】：

标签： javascript html css

【解决方案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');
      }); 
    });
  });

});

【讨论】：

是的，很抱歉。更新了我的代码，但遇到了同样的问题。