Question

当我加载第一页时，我给我的过渡元素一个新的课程＆＃34;准备好＆＃34;然后在第一次加载时启动CSS转换。然后我使用ajax为menulinks加载一个新的html文档 - 但首先我删除＆＃34; ready＆＃34;单击链接以反转转换时的类。这非常有效。

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

演示：http://svensson.streetstylizm.com/尽可能 - 在第一页开始过渡。然后单击＆＃34;摄影＆＃34;下的子菜单之一。你可以在它加载新页面之前移除就绪类并反转过渡，这不会有一个有效的过渡。

代码：

$(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放在就绪函数中。

$(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');
      }); 
    });
  });

});

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

1 个答案: