Animación CSS3, traducir a la posición

Tengo un div que hago clic para arrastrarlo. Una vez que está en un área, que anima a su posición a través de:Animación CSS3, traducir a la posición

$("#wheel1").animate({left: "200px", top: "100px"});

también puedo conseguirlo para animar con:

@-webkit-keyframes wheel1 { 
    0% { 
    } 
    100% { 
     -webkit-transform: translate(200px, 100px); 
    } 
}

siendo la diferencia; con jQuery anima a 200px desde la izquierda del documento. Con CSS3, anima 200px desde donde lo suelta (lo cual es malo)

¿Hay alguna manera de hacer que CSS3 sea animado desde la parte superior izquierda del documento, como lo hace jQuery? Intenté cambiar el origen de la transformación y algunas otras configuraciones sin suerte.

Fuente

2012-06-14 Phill

No estoy seguro de cómo los márgenes ayudarán, la forma de jQuery ya es perfecta, con CSS3, ¿cómo se traducen los márgenes? – Phill

No estoy seguro de que esté leyendo el problema correctamente. Usar izquierda/derecha está bien para jQ. La solución jQ es sólida y funciona. Estoy tratando de lograr exactamente lo mismo con CSS3, a través de la animación CSS.Los márgenes y las posiciones no se pueden usar, tiene que ser translateX/Y – Phill

Este podría ser un enlace relevante en el contexto de cómo las transformaciones top/left/right/bottom (incluso en CSS no solo jQuery) difieren de 'translate': [ ** http: //www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/**] (http://www.paulirish.com/2012/ why-moving-elements-with-translate-is-better-pos-pos-topleft /) – Nope

No soy un experto en las transformaciones de CSS3, pero creo que translate es relativo a la posición original del elemento.

Una forma que puedo ver para lograr lo que desea con CSS sería posicionar el elemento completamente, y usar un CSS3 transition para cambiar sus propiedades left y top.

Aquí es un violín: http://jsfiddle.net/nSa9s/2/

HTML:

<div class="box"></div>

CSS:

.box { 
    position: absolute; 
    background: #ff0000; 
    left: 400px; 
    top: 200px; 
    width: 100px; 
    height: 100px; 
    -webkit-transition: all 1.0s linear; 
    -moz-transition: all 1.0s linear; 
    -o-transition: all 1.0s linear; 
    -ms-transition: all 1.0s linear;  
    transition: all 1.0s linear; 
} 
.box.move { 
    left: 200px; 
    top: 100px; 
}

jQuery:

$(document).ready(function() { 
    $('.box').on('click', function() { 
     $(this).addClass('move'); 
    }); 
});

El propósito de la JS es añadir la move clasifica al elemento cuando se hace clic en él.

Fuente

2012-06-14 02:59:20

Corrígeme si me equivoco, pero la razón por la que desea utilizar las animaciones de CSS3 es porque las animaciones de jQuery no están haciendo lo que las animaciones de CSS3 pueden hacer?

Si estoy en lo correcto, mire este plugin jQuery llamado .transit que le permite aplicar todas las animaciones CSS3 a cualquier selector de la misma forma que se aplicaría en formato CSS3, pero se hace a través de métodos jQuery programáticos.

Ese complemento maneja gran cantidad de requisitos de deslizamiento y movimiento de CSS3 y cualquier otra animación de CSS3 que pueda lanzar. El enlace de arriba tiene ejemplos en toda la página.

Si esto no es lo que desea, el CSS no puede "detectar" cuando un objeto se "cae" en otro elemento. Existe el pseudo disparador :hover, pero se activará cada vez que pase lo que pase.

Fuente

2012-06-14 04:19:36 arttronics

Lo intentaré, gracias. La razón por la que trato de usar CSS3 sobre jQuery es porque es más eficiente. Lo leí también pasa el esfuerzo requerido para la GPU en lugar de la CPU. No lo dudo, como cuando traduje un fondo de 7000px de un lado de la pantalla al otro, se movió junto con jQ pero se movió perfectamente sin problemas con CSS. – Phill

Por favor duda esto ... por favor vea mi [** SO Answer **] (http://stackoverflow.com/a/11011569/1195891) para una animación CSS pura Sonar Wave FX. Firefox se ahoga mientras Chrome canta. Dicho esto, al consultar el código específico sobre el que se habla es necesario para el análisis, para ver por qué es lento en jQuery. – arttronics

Lo sentimos, probablemente debería haber mencionado 'para el iPad' – Phill

FYI, para hacer esto con animaciones CSS (no transiciones como muestra la respuesta seleccionada), simplemente necesita usar left en su fotograma clave en lugar de traducir.

@-webkit-keyframes wheel1 { 
    0% {} 
    100% { 
     left:200px; top: 100px; 
    } 
}

Fuente

2013-03-27 22:06:01 MGA

Animación CSS3, traducir a la posición

Respuesta

Cuestiones relacionadas