Şu an animations bileşeninde yerleşik ng2'leri kullanarak Angular2 siteme bazı animasyonları uygulamaya çalışıyorum. Şimdiye kadar belgelerinde sağlanan Angular 2 Developer Guide - Animations aracılığıyla çalışıyorum. Bununla birlikte, birkaç soruya rastladım, SO topluluğunun yardımcı olabileceğini umuyordum. İlk sorum/sorunum var gibi görünüyor. Animasyon (anlatabileceğim bir şeyden) çalışmıyor. sayfa yükleme Bir görünüme geçip animasyonla görüntüye geri dönersem çok iyi çalışır. Bu şu anda söz konusu animasyon için kullanıyorum kodudur (istenirse ben bütün bileşen sağlayabilir): BenAngular2 Yük ve Sayfa Geçişinde Animasyon
animations: [
trigger('kissState', [
state('in', style({opacity: 1})),
transition('void => *', [
style({opacity: 0}),
animate('250ms ease-in-out')
]),
transition('* => void', [
animate('250ms ease-in-out', style({opacity: 0}))
])
])
]
void => *opacity:0 benim DOM öğesine kuracak bir izlenimi ve onunla bir kez opacity:1 olarak in girildi. Sahip olduğum diğer bir problem ise benim navigasyonumun mobil cihazlarda çalışmadığı görülüyor. Bunları henüz sunucuma taşımadım, ancak yerel olarak gelişiyor ve localtunnel numaralı düğümü kullanarak mobil cihazıma baktığımda herhangi bir animasyon görülemiyor. Bunun nedeni, localtunnel garip yolunun çalışabilmesi, bu yüzden gerçek bir sunucuda gerçekten test edene kadar çok endişelenmem. Yönlendirici görünümde
animations: [
trigger('offScreenMenu', [
state('inactive', style({
opacity: 0,
zIndex: -10
})),
state('active', style({
backgroundColor: 'rgba(255, 255, 255, 0.8)',
zIndex: 10
})),
transition('inactive => active', animate('250ms ease-in')),
transition('active => inactive', animate('250ms ease-out'))
])
]
Angular2 ekibi tarafından bilinen bir sorundur ben sahip oldum son bir sorundur animasyonlar: İşte benim mobil cihazda çalışmıyor zaman farkettim özellikle olduğundan diğer animasyon var değişiklik. Şu anda bu sorunu ele alan bir SO question ve Angular2 repo'daki bir bilet var (SO sorusunda Günter Zöchbauer tarafından yapılan yorumda belirtilmiştir). Bununla, herhangi bir geçici çözüm olup olmadığını merak ettim? Bazı kısa araştırmalar sayesinde, bir seferde, bir kereliğine, bunun için kendi css'lerinde kullanılabilecek bir ng-enter ve ng-leave uygulanmış olabilir, ama bunlardan nasıl vazgeçtiğimi söyleyebilirim. Hala biraz daha fazla araştırma yapmalıyım, bu yüzden yanlış olabilirim.
Yardımlarınız için şimdiden teşekkür ederiz!
GÜNCELLEME (7.7.16): Pekala, bu yüzden geri dönmeye karar verdim ve sayfa yükleme animasyonunun zamanlamasıyla uğraştıktan sonra çalışıyor gibi görünüyor. Her ne kadar dikkat edilmesi gereken bir kabaca 1000ms animasyonunu yapmak zorundayım. Bu, DOM'un tamamen yüklenmeden önce animasyonun çalışmaya başladığına inandığım soruları (veya daha fazla düşünceyi) bana getiriyor. Hangisi biraz garip görünüyor. Halen mobil animasyon durumunda çalışıyor. Github repo'yla ilgili bir meseleyi dosyalamaya devam edeceğim gibi, biraz karışıklık içinde çalışıyorum ve işe yaramayacak gibi görünüyorum. Ayrıca NG2 için çalışmayan mobil animasyonlardan da bahsedilmiyor.
GÜNCELLEME (7.13.16): Angular2 ekibinin, yukarıdaki endişeleri gideren RC5 ile serbest bırakılması için birkaç düzeltmenin yapıldığını düşünüyor. Kendi sorumu cevaplamak ve kapatmak için gidiyor.