переход масштаба матрицы не работает

Я должен использовать матрицу преобразования для анимации преобразования: масштаб элемента.

Я хочу масштабировать от 0 до 1. Если я использую следующий код, он работает правильно:

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

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

Если я использую саму матрицу, она не работает.

.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/

Я что-то не так делаю или это просто не работает? Мне интересно, потому что это не работает в Chrome и Firefox...

В выводе отладки console_log говорится, что при масштабировании от 0 до 1 матрица также устанавливается с матрицы (0,0,0,0,0,0) на матрицу (1,0,0,1,0,0).

ИЗМЕНИТЬ:

Полная путаница... Если я изменю значения scaleX и scaleY в матрице на 0,1 или 0,01, это сработает... вау


css css-transitions css-transforms matrix-transform scaletransform
person yacon    schedule 29.05.2015    source источник
comment
Очень странный! Похоже, что другие значения матричного преобразования тоже с трудом анимируются jsfiddle.net/zvgcg0o0. По какой-то причине IE11 без проблем обрабатывает обе ваши демонстрации и то, что я только что сделал.   -  person sudo rm -rf slash    schedule 29.05.2015
comment
Вы сами ответили на свой вопрос, правда. 0.001 настолько мал, насколько это возможно, и при этом иметь переходы. Я не уверен в точной причине, по которой ноль отключает анимацию, но это так.   -  person Wray Bowling    schedule 29.05.2015
comment
Не похоже, что для этого существует отчет об ошибке, возможно, его стоит подать. Если это действительно не ошибка (я не уверен, как это может быть), вы, по крайней мере, можете попросить инженера объяснить поведение: code.google.com/p/chromium/issues/entry   -  person Adam    schedule 30.05.2015
comment
Я создал вопрос, и я получил ответ, сказал YandY Viera. code.google.com/p/chromium/issues/detail?id= 494914 Так что это не ошибка и не будет исправлена.   -  person yacon    schedule 08.06.2015

Ответы (1)


arrow_upward
3
arrow_downward

При анимации или переходе преобразований списки функций преобразования должны быть интерполированы. Две функции преобразования с одинаковым именем и одинаковым количеством аргументов интерполируются численно без предварительного преобразования. Вычисленное значение будет иметь тот же тип функции преобразования с тем же количеством аргументов.

К функциям rotate3d(), matrix(), matrix3d() и перспектива() применяются специальные правила. Функции преобразования matrix (), matrix3d ​​() и перспектива () сначала преобразуются в матрицы 4x4 и интерполируются. Если одна из матриц для интерполяции является единственной или необратимой (если и только если ее определитель равен 0), преобразованный элемент не визуализируется, и используемая функция анимации должна вернуться к дискретной анимации в соответствии с правилами соответствующей спецификации анимации.

Тогда в случае матрицы (0,0,0,0,0,0) очевидно, что матрицы результатов 4X4 для масштаба являются сингулярными

Кредиты для http://www.w3.org/TR/css3-2d-transforms/

person Yandy_Viera    schedule 07.06.2015