css3 - texto - transiciones css ejemplos
Transición de CSS para un solo tipo de transformación (4)
¿Es posible animar (usando transiciones) solo un tipo de transformación css?
Tengo css:
cell{
transform: scale(2) translate(100px, 200px);
transition: All 0.25s;
}
Ahora, quiero que solo la escala sea animada. En este caso podría usar position: absolute y left / right properties pero por lo que recuerdo, translate () es mucho mejor en rendimiento. También me gustaría evitar el uso de elementos html adicionales.
Fiddle: http://jsfiddle.net/6UE28/2/
¡Sí! Lo separa en dos selectores, uno de ellos con transition: none
, luego desencadena el reflujo de CSS entre ellos para aplicar el cambio (de lo contrario, se considerará como un cambio y hará la transición).
var el = document.getElementById(''el'');
el.addEventListener(''click'', function() {
el.classList.add(''enlarged'');
el.offsetHeight; /* CSS reflow */
el.classList.add(''moved'');
});
#el { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#el.enlarged { transform: scale(2); transition: none; }
#el.moved { transform: scale(2) translate(100px); transition: transform 3s; }
<div id="el"></div>
En lugar de forzar un reflow , puede usar setTimeout
.
var el = document.getElementById(''el'');
el.addEventListener(''click'', function() {
el.classList.add(''enlarged'');
setTimeout(function() {el.classList.add(''moved'');})
});
#el { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#el.enlarged { transform: scale(2); transition: none; }
#el.moved { transform: scale(2) translate(100px); transition: transform 3s; }
<div id="el"></div>
Si por qué no. Para hacer eso, debes usar solo una transformación.
Esto es lo que te confunde: no aplicas la transformación en el elemento en sí. Usted aplica eso al estado de cambio (por medio de una pseudoclase como :hover
u otra clase usando los estilos que desee en el estado modificado). Por favor, vea el comentario de @ David en su pregunta. Cambia el estado de solo la propiedad que desea cambiar y que se animará.
Entonces, efectivamente los cambias selectivamente en función del estado cambiado.
Solución 1 : Usar Javascript (basado en el violín que brindó en su pregunta)
Demostración : http://jsfiddle.net/abhitalks/6UE28/4/
CSS relevante :
div{
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
/* do NOT specify transforms here */
}
JQuery relevante :
$(''...'').click(function(){
$("#trgt").css({
"-webkit-transform": "scale(0.5)"
});
});
// OR
$(''...'').click(function(){
$("#trgt").css({
"-webkit-transform": "translate(100px, 100px)"
});
});
// OR
$(''...'').click(function(){
$("#trgt").css({
"-webkit-transform": "scale(0.5) translate(100px, 100px)"
});
});
Solución 2 : solo uso de CSS
Demostración 2 : http://jsfiddle.net/abhitalks/4pPSw/1/
CSS relevante :
div{
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
/* do NOT specify transforms here */
}
div:hover {
-webkit-transform: scale(0.5);
}
/* OR */
div:hover {
-webkit-transform: translate(100px, 100px);
}
/* OR */
div:hover {
-webkit-transform: scale(0.5) translate(100px, 100px);
}
¡No! no puede usar transition
solo para cierto valor de transform
como scale(2)
.
Una posible solución sería la siguiente: (lo siento, tienes que usar html adicional)
HTML
<div class="scale">
<div class="translate">
Hello World
</div>
</div>
CSS
div.scale:hover {
transform: scale(2);
transition: transform 0.25s;
}
div.scale:hover div.translate {
transform: translate(100px,200px);
}