Cenário 1
Você tem um elemento que deseja expandir height: 0para qualquer que seja sua altura natural. Você prefere usar CSS, mas todos sabem que você não pode fazer a transiçãoheight: auto; , então você recorre ao .slideDown(). Isso é bom, mas agora você tem que coordenar seu CSS com seu JS para garantir que tudo seja cronometrado corretamente entre os dois e que eles aconteçam na mesma chamada sempre que você fizer uma mudança de classe e …
Cenário 2
Você tem uma lista de inline-blockelementos que gostaria de aumentar horizontalmente com uma transição agradável e suave. Você poderia fazer isso se definir a widthpropriedade, mas não quer que todos tenham o mesmo tamanho. Claro, você poderia escrever algum JS para criar um elemento clone, medir a largura e definir o atributo de estilo, mas … não.
É uma dor.
Em vez de fazer tudo isso, você pode “abusar” das propriedades max-heighte max-width. São propriedades de limiar, o que significa que permitirão que o elemento suba até um determinado valor, mas não mais. Eles também são animáveis . Portanto, se você definir a max-propriedade como algo que você sabe que a caixa não ficará maior do que, você pode animá-la!
Aqui está uma demonstração mostrando um exemplo max-widthe max-height.
Embargo
Quando você define uma propriedade, pelo menos no momento desta escrita, a animação ocorre como se o elemento tivesse esse tamanho para iniciar, o que significa um atraso potencial da animação. Portanto, é recomendável que, se você tiver uma animação de contração (ou seja, deseja que o elemento se oculte novamente), dimensione sua propriedade o mais próximo possível do tamanho real que deseja. Isso é demonstrado no link do violino acima com as duas caixas vermelhas. Observe como a pequena caixa vermelha não começa a encolher até que a grande caixa vermelha esteja no mesmo lugar.max-max-