Tôi có thể cung cấp cho chế độ xem hoạt ảnh hiển thị trong emberjs

Question

Đây là ví dụ sử dụng bộ định tuyến emberjs http://jsbin.com/agameq/edit. Bây giờ tôi muốn có một số hoạt hình hiển thị, như fadeIn hoặc fadeOut, khi tuyến đường thay đổi. tôi nên làm gì?

Answer 1

Mỗi View trong ember có một phương thức có tên didInsertElement:

Được gọi là khi các yếu tố của quan điểm đã được đưa vào DOM. Ghi đè chức năng này để thực hiện bất kỳ thiết lập nào yêu cầu phần tử trong phần thân tài liệu.

Tất cả các quan điểm ember cũng có một $ đó là một tham chiếu đến jQuery, vì vậy bạn có thể bọc một số yếu tố trong quan điểm của bạn với nó và áp dụng bất kỳ thay đổi nào đó như:

// this will animate only the tag h2, which in your case is the title of the users view 
App.UsersView = Ember.View.extend({ 
    templateName: 'users', 
    didInsertElement: function() { 
     this.$('h2').animate({ fontSize: "3em" }, 900); 
    } 
}); 

Hoặc bạn có thể gọi nó mà không có đối số (như $()) để trả về khung nhìn hiện tại được bao bọc bởi jQuery.

Để animate một quan điểm như bạn nhập vào mà xem/tuyến đường, làm điều này trong App.UsersView của bạn:

// this will animate the entire view 
App.UsersView = Ember.View.extend({ 
    templateName: 'users', 
    didInsertElement: function() { 
     this.$().animate({ fontSize: "3em" }, 900); 
    } 
}); 

(Note: phim hoạt hình của tôi là khá khập khiễng, nhưng nó chỉ là để hiển thị, nơi để gọi phương pháp, làm một hình ảnh động sản)

Dưới đây là một phiên bản sửa đổi của your JSBin

Answer 2

Tiếp theo câu trả lời từ @MilkyWayJoe, có lẽ bạn muốn ẩn Xem trước inserti ng nó, bằng cách thiết lập isVisible tài sản để false:

App.UsersView = Ember.View.extend({ 
    templateName: 'users', 

    isVisible: false, 

    didInsertElement: function() { 
     var self = this; 
     this.$().fadeIn(700, function(){ 
      self.set('isVisible', true); //inform observers of `isVisible` 
     }); 
    } 
}); 

Hoặc sử dụng this animation Mixin, cho phép bạn để animate xem bằng cách thay đổi một tập hợp các thuộc tính CSS quan sát:

App.UsersView = Ember.View.extend(JQ.Animate, { 
    templateName: 'users', 

    isVisible: false, 

    // Observed CSS properties 
    cssProperties: ['display'], 

    // Optional animation properties 
    duration: 700, 
    easing: 'easeInOutCubic', 

    didInsertElement: function() { 
     this.set('display', 'block'); 
    }, 

    afterAnimate: function() { 
     this.set('isVisible', true); 
    } 
});