Arka plan konumu dışında tüm özelliklere CSS3 geçişini nasıl uygularım?

109

Arka plan konumu dışındaki tüm özelliklere bir CSS geçişi uygulamak istiyorum. Bunu şu şekilde yapmaya çalıştım:

.csstransitions a {
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}

.csstransitions a {
    -webkit-transition: background-position 0s ease 0s;                 
    -moz-transition: background-position 0s ease 0s;                
    -o-transition: background-position 0s ease 0s;  
    -ms-transition: background-position 0s ease 0s;         
    transition: background-position 0s ease 0s;
}

Önce tüm özellikleri geçiş için ayarladım ve ardından yalnızca arka plan konumu özelliği için geçişin üzerine yazmaya çalıştım.

Ancak bu, diğer tüm özellikleri de sıfırlıyor gibi görünüyor - yani temelde geçişlerin hiçbiri artık gerçekleşmiyor gibi görünüyor.

Tüm mülkleri listelemeden bunu yapmanın bir yolu var mı?

css css-transitions

— Yemek
kaynak

1

Merhaba, aslında bu sorunu arıyorum. Kabul edilebilir bir cevap aldın mı?

— Milche Patern

144

İşte Firefox'ta da çalışan bir çözüm:

transition: all 0.3s ease, background-position 1ms;

Küçük bir demo yaptım: http://jsfiddle.net/aWzwh/

— Felix Edelmann
kaynak

3

Nedense 1msbenim için işe yaramadı, ama işe 0yaradı.

— Flimm

@Flimm, hangi tarayıcıyı kullanıyorsun? Ve "çalışmadı" derken neyi kastediyorsunuz, hiçbir şeyi canlandırmadınız mı?

— Felix Edelmann

1

Benim 1msiçin işe yaramadı, ama çalıştı 1ms none! @ericsoco 0msveya 0sçalışır.

— BCoder

3

Zaman birimlerinin bir birimi OLMALIDIR. Yani 0, tıpkı 4'ün çalışmayacağı gibi çalışmaz, ancak 4'ler, 0'ların çalışacağı gibi çalışacaktır.

— ESR

2

Bunu çok uzun zamandır aradım, teşekkür ederim @FelixEdelmann !!

— tatsu

17

Umarım geç kalmaz. Sadece bir hat kullanılarak gerçekleştirilir!

-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;

Bu, Chrome'da çalışır. CSS özelliklerini virgülle ayırmanız gerekir.

İşte çalışan bir örnek: http://jsfiddle.net/H2jet/

— aldo.roman.nurena
kaynak

6

Bunu Chrome'da deniyorum ve benim için çalışmıyor gibi görünüyor. allGeçiş-mülk ne olursa olsun diğerlerini geçersiz görünüyor.

— animuson

2

İlginç. Sanırım onu diğer özelliklerle test etmedim. Denediğimde color 0işe yaradı, ama kesinlikle çalışmıyor background-position 0. background 0Benim için sonuç bile vermiyor ... İşte Gaming.SE menüsünden kurduğum bir jsFiddle. Dürüst olmak gerekirse, background-positionbaşlangıçta test bile ettim çünkü sorunun özellikle bahsettiği ve kendimi değiştirmeye çalıştığım soru buydu.

— animuson

2

Benim için krom üzerinde çalışıyordu. Hala IE11'de çalışıyor, ancak bu hafta itibariyle tüm mülk artık daha sonra hattaki her şeyi geçersiz kılıyor.

— cirrus

1

@Cirrus'un dediği gibi, Chrome artık 0 saniyelik süreyi kabul etmiyor, ancak bunun yerine çok kısa bir süre vererek çalışmasını sağlayabilirsiniz, örneğin.1ms

— GetFree

1

Bu, sıfır olmayan bir saniye süresi sağlanırsa hem Chrome hem de Firefox'ta çalışır.

— Naisheel Verdhan 15

4

Bunu dene...

* {
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}
a {
    -webkit-transition: background-position 1ms linear;
    -moz-transition: background-position 1ms linear;
    -o-transition: background-position 1ms linear;
    transition: background-position 1ms linear;
}

— Siva
kaynak

"Bunu dene" yalnızca kod yanıtları en iyisi değildir. Daha iyisi, ne yaptığınızın bir açıklamasıdır.

— random_user_name

2

Standart W3C yöntemini kullanmayı deneyebilirsiniz:

.transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; }

http://jsfiddle.net/H2jet/60/

— Lucianmarin
kaynak

2

Kısa bir yol arayan herkes için , gecikmeli belirli bir özellik dışında tüm özelliklere geçiş eklemek için , modern tarayıcılar arasında bile farklılıklar olduğunu unutmayın .

Aşağıdaki basit bir demo, farkı gösterir. Tam kodu kontrol edin

div:hover {
  width: 500px;
  height: 500px;
  border-radius: 0;
  transition: all 2s, border-radius 2s 4s;
}

Chrome, iki animasyonu (beklediğim gibi) aşağıdaki gibi "birleştirecektir":

Safari onu "ayırırken" (beklenmeyebilir):

Daha uyumlu bir yol, bunlardan biri için bir gecikmeniz varsa, belirli mülk için belirli geçişi atamanızdır.

— iplus26
kaynak

Aslında. Bu kritik öngörüdür. Ne yazık ki, her özelliği ayrı ayrı belirtmek zorunda kalmaktır, alltarayıcılarda istenen davranışı elde etmenin tek yolunun bu olduğunu bilmek yararlıdır.

— random_user_name

1

Deneyin:

-webkit-transition: all .2s linear, background-position 0;

Bu benim için benzer bir şey üzerinde çalıştı ...

— StuR
kaynak

arka plan konumunu 0 olarak sabitlemek = arka plan konumundan geçişi kaldırmak değildir. Değil mi?

— Milche Patern

1

Bu asla işe yaramaz. Daha sonra geçiş özelliğini yeniden tanımlayarak, önceki geçiş özelliğini, sanki hiç var olmamış gibi tamamen geçersiz kılarsınız. Konsolide edilmezler.

— animuson