106.9K+İndir
Kullanım kılavuzuna geç
Transitions.devyazan Jakubantalik

Transitions.dev Skill'i.

Bileşene özel CSS geçişleri ve anlamsal hareket token’ları uygulayın.

  • Geçişler
  • Web animasyonu
OpenDesign İndirKullanım Kılavuzunu Görüntüle
Kaynak incelemesi · transitions-devSKILL.md
Görev Bileşene özel CSS geçişleri ve anlamsal hareket token’ları uygulayın. Çıktılar Gereken CSS değişkenleriyle seçilmiş geçiş tarifi. Başlamadan önce Bileşenin işaretlemesini, stillerini, durum işlemesini ve mevcut hareket token’larını sağlayın. Tarifi uyarlamadan önce amaçlanan kullanım için özel lisansı inceleyin; yeniden dağıtım ve şablon kullanımlarının özel koşulları vardır.
Editoryal özet · kaynak inceleme tarihi 2026-11-02 · oluşturulmuş bir örnek değildir

01 İşlevler

Bileşene özel CSS geçişleri ve anlamsal hareket token’ları uygulayın

Menüler, modallar, metin ve kontroller için anlamsal token’lar, durum hook’ları ve tekrarlı etkileşim kontrolleriyle CSS geçiş tariflerini keşfedin.

Kaynağa dayalı iş akışıÇalıştırma kıyaslaması değildir

Çalışma Yaklaşımı

transitions-dev, ad alanlı seçiciler ve anlamsal hareket değişkenleriyle taşınabilir CSS geçiş tarifleri sunar. Görünür bileşeni uygun tarifle eşler: tetikleyiciye bağlı açılır menü, modal, değişen metin veya kayan sekme göstergesi. Uygulama, belgelenmiş durum hook’larını gerçek uygulama davranışına bağlar.

Skill inceleme ve iyileştirme yolları da sunar. İnceleme düzenleme yapmadan olası kullanım yerlerini bulur; iyileştirme gelişigüzel değerleri anlamlarına göre token’larla eşler. Kapanış animasyonu, eski sayı yakın diye değil, amacı kapanış olduğu için kapanış süresi token’ına bağlanır.

Beklenen Çıktılar

  • Gereken CSS değişkenleriyle seçilmiş geçiş tarifi.
  • Bileşene bağlanmış belgelenmiş sınıf veya öznitelik hook’ları.
  • Dosya düzeyinde inceleme veya anlamsal token iyileştirme önerisi.
Örnek Brief'i Gör

Brifden İncelemeye

  1. 01
    Bileşeni eşleyin

    Öğeyi ve durum değişimini inceleyin. Bağlı menüyü ortalanmış modaldan, metin değişimini sayfa hareketinden ayırın.

  2. 02
    Token ve durum hook’larını ekleyin

    Ortak değişken bloğunu bir kez veya seçilen tarifin değişkenlerini kullanın. Kapanış temizliğini, tekrar oynatmayı ve gereken JavaScript koordinasyonunu koruyun.

  3. 03
    Tekrarlı davranışı deneyin

    Bileşeni açın, kapatın ve yeniden açın. Azaltılmış hareket dalını kontrol edin; değişken tabanlı zamanlamanın temizleme mantığıyla eşzamanlı kaldığını doğrulayın.

02 Kullanım Alanları

Ne zaman kullanılır

Bileşenin işaretlemesini, stillerini, durum işlemesini ve mevcut hareket token’larını sağlayın. Tarifi uyarlamadan önce amaçlanan kullanım için özel lisansı inceleyin; yeniden dağıtım ve şablon kullanımlarının özel koşulları vardır.

İyi Bir Uyum

  • Bileşenin tanımlı geçişe ihtiyacı varsaTarifler CSS davranışını soyut animasyon talebi yerine tanınabilir UI durumlarına bağlar.
  • Zamanlama değerleri tutarsızlaştıysaİyileştirme yolu, her sürenin hizmet ettiği eyleme göre anlamsal token’lar önerir.

Kontrol Edilecek Sınırlar

  • Kütüphanenin yeniden dağıtım sınırları vardırSkill’in özel lisansı kişisel ve ticari ürün kullanımına izin verir; ancak koleksiyonun veya önemli bölümünün rakip geçiş kütüphanesi, motion paketi veya animasyon kiti olarak yeniden yayımlanmasını yasaklar. Şablon ve temalar için ek koşullar vardır; deponun yalnızca araçlara ait MIT lisansı bu skill’i kapsamaz.
  • Hook’lar yine entegre edilmelidirKod parçası doğru uygulama durumunu, odak yönetimini veya çevredeki bileşen davranışını otomatik sağlamaz.

Bu Girdileri Getirin

  • Bileşen koduİlgili işaretlemeyi, stilleri ve durum uygulamasını sağlayın.
  • Etkileşim amacıAçılma, kapanma, değiştirme veya geri bildirim olayını belirtin.
  • Mevcut hareket sistemiGüncel token’ları, tema davranışını ve önceden kurulu ortak değişken bloğunu ekleyin.

03 Önemli Kararlar

Önemli kararlar

  1. Anlamsal ayarlama

    Adlandırılmış süreler ve mesafeler bileşenin nasıl hareket ettiğini ifade eder.

  2. Küçük bileşen kapsamı

    Kaynak hedefli düzenlemeleri tercih eder; genel hareket kütüphanesi eklemekten kaçınır.

  3. Tekrarlanabilir etkileşimler

    Temizleme ve tekrar kuralları, yalnızca ikinci etkileşimde görülen hataları ele alır.

04 Örnek Görev Tanımı

Odaklı bir brief deneyin

Aşağıdaki örnek brif test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kaynağı ve kurulumu inceleyin

İlgili işaretlemeyi, stilleri ve durum uygulamasını sağlayın.

Üst Kaynak Dosyası
https://github.com/Jakubantalik/transitions.dev/blob/e3aefb554d8fd2cb3e91e773e82a0f2d5a4f82a0/skills/transitions-dev/SKILL.md

Aşağıdaki referans, özgün talimatları açar. Kullanmadan önce depo kurulumunu inceleyin; bu bir kurulum komutu değildir.

Tek bir çıktıyla başlayın

Skill'i çalıştırmadan önce bu brifteki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brif
Mevcut uygulamamdaki hesap açılır menüsünü transitions-dev ile iyileştir. Tarif seçmeden önce tetikleyiciyi, menü durumunu ve mevcut CSS’i incele. Menü tetikleyiciden büyüsün; projenin klavye ve odak davranışını koru. Mevcut kök bloğu çoğaltmadan anlamsal hareket değişkenleri kullan. Hızlı aç-kapat-aç etkileşimini kontrol edip kapanış sınıfının temizlendiğini doğrula. Azaltılmış hareket dalını ve açık/koyu temaları koru. Hedefli değişiklikleri sun ve bağlanan durum hook’larını açıkla; menü içeriğini veya ilgisiz bileşenleri yeniden tasarlama.

Sonucu inceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

  • Kapanış temizliğini, tekrarlı veya kesintiye uğramış etkinleştirmeyi test edin.
  • Token içe aktarımlarının yinelenmediğini ve zamanlama okumalarının CSS ile eşleştiğini kontrol edin.
  • Azaltılmış hareketi, odak davranışını ve iki temayı deneyin.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu listeleme, skill'in paketle birlikte geldiği veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil olduğu anlamına gelmez.

OpenDesign İndirHızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi
Jakubantalik
Depo
Jakubantalik/transitions.dev
Skill Dosyası
SKILL.md
Lisans
LicenseRef-Transitions-dev
İncelenen Sürüm
2026-11-02 · e3aefb554d8f
Editoryal Kaynak Özeti
Bileşene özel CSS geçişleri ve anlamsal hareket token’ları uygulayın.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; skill kullanımını veya kalite puanını göstermez.

06 Başlamadan Önce Sorular

Başlamadan önce sorular

JavaScript animasyon çatısı gerekir mi?

Tarifler CSS ve gerektiğinde küçük durum koordinasyonu parçaları kullanır. Kaynak genel hareket çatısı gerektirmez.

refine neyi değiştirir?

Önce gelişigüzel hareket değerleri için anlamsal kullanıma göre değişim önerir. Anlamı eşleşen token bulunmayan değerler korunur.

Animasyon ikinci açılışta neden bozulabilir?

Kaynak, kalan kapanış sınıflarını ve tekrar için eksik reflow işlemini yaygın nedenler olarak vurgular. İlk açılış ekran görüntüsü bu sorunları göstermez.

OpenDesign

Brief'inizi ve tasarım çalışmanızı bir arada tutun.

Brifinizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

OpenDesign İndirTasarım Skill'lerine Göz At
Üst Kaynak Dosyası
https://github.com/Jakubantalik/transitions.dev/blob/e3aefb554d8fd2cb3e91e773e82a0f2d5a4f82a0/skills/transitions-dev/SKILL.md