jQuery だけを使用して動作する単純なアニメーションがあります。
jQuery(document).ready(function($) {
$('.right-block').on('click', 'chevron', function() {
if ($('.activity').hasClass('extended')) {
$('.activity').removeClass('extended').addClass('normal');
$('.extended-block').slideUp();
$('footer').fadeOut();
} else {
$('.activity').addClass('extended').removeClass('normal');
$('.extended-block').slideDown();
$('footer').fadeIn();
}
});
});
必要に応じて、ここで実際の動作を確認できます: http://cdpn.io/3bfea533af106c9bb601626be55eb3c1
Ember で同じことをしようとすると、少しおかしくなります。アニメーションの開始、反転、再起動など。多くの場合、何度も行ったり来たりした後に完了しますが、状態遷移は保証されておらず、開始時と同じ状態になる可能性があります。
私の Ember コンポーネントは次のようになります。
App.ActivityWidgetComponent = Ember.Component.extend({
actions: {
toggleWidgetState: function() {
var self = this;
this.$('.right-block').on('click', 'chevron', function() {
Ember.run.next(this, function() {
if (self.$('.activity').hasClass('extended')) {
self.$('.activity').removeClass('extended').addClass('normal');
self.$('.extended-block').slideUp();
self.$('footer').fadeOut();
} else {
self.$('.activity').addClass('extended').removeClass('normal');
self.$('.extended-block').slideDown();
self.$('footer').fadeIn();
}
});
});
}
}
});
私のこっそりの疑いは、これが「ランループ」ダークアートと関係があるということです. そのため、次の実行ループに jQuery を追加することで「トリッキー」にしようとする私の試みを目にすることができます。その変更により、動作が少し改善されたように見えましたが、解決されたわけではありません (正しい方向への一歩であったかどうかはわかりません)。
どんな助けでも感謝します。