Modal Görünümlere Animasyon Yapma

Kalıcı görünümler, kullanıcı arayüzünün önemli iletilerin görüntülenmesini engeller. Uygulamalarınızda kalıcı görünümlere nasıl animasyon uygulayacağınızı öğrenin.

Kalıcı görünümler önemli mesajlar içindir ve bunlar için kullanıcı arayüzünü engellemek üzere çok geçerli nedenleriniz vardır. Kullanımı aksamaya neden olacağından ve aşırı kullanıldığında kullanıcının deneyimini kolayca olumsuz etkileyeceğinden dikkatli kullanın. Ancak bazı durumlarda bunlar kullanılması doğru görünümlerdir ve biraz animasyon eklemek bu görüntülere hayat verir.

• Kalıcı görünümleri ölçülü bir şekilde kullanın. Gereksiz şekilde deneyimlerini yarıda kesen kullanıcılar hayal kırıklığına uğrar.
• Animasyona ölçek eklemek güzel bir "düşüş" efekti sağlar.
• Kullanıcı kapattığında kalıcı görünümden hızla kurtulun. Ancak, kullanıcıyı şaşırtmaması için kalıcı görünümü ekrana biraz daha yavaş getirin.

Kalıcı yer paylaşımı görüntü alanına hizalanmalıdır. Bu nedenle, position değerini fixed olarak ayarlayın:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

Başlangıç opacity değeri 0 olduğu için görünümden gizlenir, ancak tıklamaların ve dokunmaların geçmesi için pointer-events öğesinin de none olarak ayarlanması gerekir. Aksi takdirde tüm etkileşimler engellenerek sayfanın tamamı yanıt vermeyebilir. Son olarak, opacity ve transform öğelerini canlandırdığından bunların will-change ile değişiyor olarak işaretlenmesi gerekir (ayrıca bkz. Will-change özelliğini kullanma).

Görüntüleme görünür olduğunda etkileşimleri kabul etmeli ve 1 üzerinden opacity değerine sahip olmalıdır:

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

Artık kalıcı görünüm gerektiğinde "visible" (görünür) sınıfını değiştirmek için JavaScript'i kullanabilirsiniz:

modal.classList.add('visible');

Bu noktada, kalıcı görünüm herhangi bir animasyon olmadan görünür. Dolayısıyla, bunu şimdi ekleyebilirsiniz (ayrıca bkz. Özel Yumuşak Geçiş):

.modal {
  transform: scale(1.15);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

Dönüşüme scale eklenmesi, görünümün ekrana çok az düşmesine neden olur. Bu iyi bir efekttir. Varsayılan geçiş, özel bir eğrisi ve 0,1 saniye süresi olan hem dönüşüm hem de opaklık özellikleri için geçerlidir.

Süre oldukça kısa olsa da kullanıcı görünümü kapattığında ve uygulamanıza geri dönmek istediğinde idealdir. Olumsuz yanı, kalıcı görünüm gösterildiğinde muhtemelen fazla agresif olmasıdır. Bunu düzeltmek için visible sınıfının geçiş değerlerini geçersiz kılın:

.modal.visible {
  transform: scale(1);

  transition:
    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

Şimdi kalıcı görünümün ekrana gelmesi 0,3 saniye sürüyor.Bu biraz daha az agresif olsa da hızlı bir şekilde kapatıldığı için kullanıcılar bunu memnun edecek.