8

Dönüştürme matrisini, bir öğenin dönüşümünü ölçeklendirmek için kullanmalıyım. Aşağıdaki kodu kullanırsanızmatris ölçek geçişi çalışmıyor

Ben düzgün çalıştığını 0'dan 1. ölçekleme istiyorum: Ben matrisi kendisi kullanırsanız

.container { 
    width: 200px; 
    height: 100px; 
    background: yellow; 
    transform: scale(0); 
    transition: transform 1s; 
} 
.container.open { 
    transform: scale(1); 
} 

https://jsfiddle.net/w4kuth78/1/

, değil çalışma olduğunu.

.container { width: 200px; height: 100px; background: yellow; transform: matrix(0, 0, 0, 0, 0, 0); transition: transform 1s; } .container.open { transform: matrix(1, 0, 0, 1, 0, 0); } 

https://jsfiddle.net/m7qpetkh/1/

Yanlış bir şey yapıyorum veya bu çalışma sadece değil mi? Merak ediyorum, çünkü Chrome ve Firefox'ta çalışmıyor ...

Console_log hata ayıklama çıktısı, 0'dan 1'e ölçeklemede matrisin matristen de ayarlandığını belirtir (0,0,0,0, 0,0) matris (1,0,0,1,0,0).

DÜZENLEME: ... vay 0.1 veya 0.01 çalışır matriste scaleX ve scaleY değerlerini değiştirmek ise animasyon veya dönüşümleri geçtiğinde

toplam karışıklık ...

+0

Çok garip için

Kredi vardır! Diğer matris dönüşüm değerleri de https://jsfiddle.net/zvgcg0o0/ da canlandırmaya çalışmaktadır. Hangi sebeple olursa olsun IE11, hem demolarınızı hem de sorunsuz bir şekilde yaptığım şeyleri halleder. –

+0

Kendi sorunuzu cevapladınız, gerçekten. 0.001, gidebileceğiniz kadar küçük ve geçişler de var. Sıfırın neden animasyonu devre dışı bıraktığının tam olarak emin değilim, ama öyle. –

+0

Bunun için bir hata raporu gibi görünmüyor, bir dosyaya layık olabilir. Bu gerçekten bir hata değilse (nasıl olacağından emin değilim), en azından davranışını açıklığa kavuşturmak için bir mühendis alabilirsiniz: https://code.google.com/p/chromium/issues/entry – Adam

cevap

2

dönüşümü İşlev listeleri enterpolasyonlu olmalıdır. Aynı isimle ve aynı sayıda argümanla iki dönüşüm fonksiyonu, eski bir dönüşüm olmadan sayısal olarak enterpolasyonludur. Hesaplanan değer, aynı sayıda argüman ile aynı dönüşüm fonksiyon tipinde olacaktır.

Özel kurallar rotate3d(), matrix(), matrix3d ​​() ve perspektif() için geçerlidir. Matris(), matrix3d ​​() ve perspektif() dönüşümü işlevleri ilk önce 4x4 matrisine dönüştürülür ve enterpolasyona alınır. İnterpolasyon matrislerinden biri tekil veya tersine çevrilemezse (determinantı 0'dır), dönüştürülmüş eleman işlenmez ve kullanılan animasyon fonksiyonu, ilgili animasyon spesifikasyonunun kurallarına göre ayrı bir animasyona geri düşmelidir. çok açık matrisin (0,0,0,0,0,0) durumunda Sonra

, ölçek için 4X4 sonuç matrisleri tekil biçimler http://www.w3.org/TR/css3-2d-transforms/