Javascript jQuery/JS:。一个未触发，因为在操作开始之前未完成设置？

我有下面的代码来淡出一页，一旦淡出，就淡入另一页。我正在使用transitionend侦听器使用jQuery中的.one来处理这个问题

它不总是工作，事件不会被触发。但是，一旦我在.1和.removeClass（启动动画）之间添加延迟，它就会工作

var old_pageid = parseInt( $('#container .page-show').attr( 'id').match( /\d+/)[0]);
$( '#pc'+old_pageid).one( 'transitionend', $.proxy( function() {
  $( '#pc'+old_pageid).addClass( 'display-none');
  $( '#pc'+pageid).removeClass( 'display-none');
  setTimeout( function() {
    $('#pc'+pageid).addClass( 'page-show');
  }, 50);
}, this)).removeClass( 'page-show');

看起来很像第一个。一个电话花的时间太长了。我认为这是一个阻塞函数。但是调用了最后一个removeClass（'page show'），但是什么也没有发生。未调用第一个.one中的回调

这里怎么了？我怎样才能保证，第一个。一个人真的完成了并且听了“transitionend”

---

另一件奇怪的事情是，当我立即添加页面显示时，转换不起作用。但是使用50毫秒的超时时间，它就可以工作了。因为页面是第一个设置显示：无；，然后将其删除并添加页面显示，从而使页面不透明：1。

请在页面上显示其余代码，以便我们可以看到

old_pageid

的上下文，并且

pageid

在顶部添加了一些代码。旧页面ID只需通过类页面显示从当前页面获取。pageid与包含上述代码的函数调用一起发送。两个pageid都已正确设置，并已测试该部件。正如我所说，一旦我在最后一行添加.one和.removeClass之间的“.delay（200）”，它就可以工作了。您能模拟一个工作示例（例如在JSFIDLE中）吗？在这里，似乎没有足够的东西可以通过而不看到它的作用。