¿Cómo puedo animar la página: cambiar con turbolinks?
¿Es eso posible?
Intenté una transición css en el cuerpo pero no funcionó como se esperaba. No sepa cómo actualizar solo una parte de la ventana e hizo una devolución de llamada cuando se hace, o si es posible.
Gracias por adelantado
Respuestas
13 para la respuesta № 1Algo como esto podría funcionar (en CoffeeScript usando jQuery):
$(document).on "page:fetch", ->
$("#content").fadeOut "slow"
$(document).on "page:restore", ->
$("#content").fadeIn "slow"
También puedes usar animaciones CSS o un JavaScript más complicado. Aquí hay una gran publicación. Eso va en profundidad con algunos ejemplos y demostraciones.
Además, me encontré con un transiciones turbolink rubí joya (Que no he probado).
3 para la respuesta № 2
No puedes actualizar realmente solo una parte de laventana con turbolinks, es posible que desee utilizar pjax en su lugar. Pero puede hacer algunas cosas difíciles para que parezca que se trata de una transición y actualización de solo una parte de la página con turbolinks.
Tengo una página de índice que enumera algunos artículos, ySi hace clic en un elemento, se dirige a la página de presentación. Pero desde la página del programa todavía quiero poder navegar directamente a otros elementos "mostrar páginas. En la página de índice, la lista de elementos tiene seis columnas de ancho, y la animo a ser más angosta en la página del programa para dejar espacio para la detalles
// items.css.sass
.width-trans
+transition(width 400ms ease-in)
Defina una clase CSS simple para hacer cambios de transición al ancho del elemento.
<!-- index.html.erb ->
<div id="target_div" class="width-trans six columns">
<%= link_to "Item",
item_path(@item.id),
:"data-no-turbolink" => true,
:class => "trans" %>
</div>
Configuramos data-no-turbolink en true en los enlaces que estamos realizando la transición para que podamos tener un poco más de control.
# items.js.coffee
$(document).on "page:restore", (e) ->
if window.location.href.match(//items/d$/) || window.location.href.match(//items$/)
$("#target_div").removeClass("three").addClass("six")
else
$("#target_div").removeClass("six").addClass("three")
target_page = undefined # Sorry, this "target_page" stuff is a little janky.
if Modernizr.csstransitions
eventEndNames =
"WebkitTransition": "webkitTransitionEnd"
"MozTransition": "transitionend"
"OTransition": "oTransitionEnd"
"msTransition": "MSTransitionEnd"
"transition": "transitionend"
eventName = eventEndNames[Modernizr.prefixed("transition")]
$(document).on eventName, "#target_div", () ->
Turbolinks.visit(target_name) if target_page
target_page = undefined
$(document).on "click", ".trans", (e) ->
e.preventDefault()
target_name = e.target.href
$(e.target).closest("#target_div").toggleClass("three six")
false
Bueno, esto es un poco loco y tal vez podamos encontrar una forma más general de hacerlo. Pero aquí está el resumen de lo que está pasando:
Hemos desactivado Turbolinks en nuestro.enlaces trans para que Turbolinks no "t" busque la nueva página al instante (le indicaremos explícitamente a Turbolinks cuándo buscarla). Cuando hacemos clic en un enlace .trans, busca el #target_div y alterna las clases .six y .three. Uso Foundation, así que tres y seis son parte de mi sistema de cuadrícula y definen el ancho de mis divs ... así que cuando cambio de seis a tres esto cambia el ancho.
Eso desencadena mi transición CSS, #target_div reduce su ancho y luego dispara el evento final de transición. Cuando finaliza la transición, llamamos a Turbolinks.visit () en nuestra URL de destino.
El #target_div debe ser renderizado tanto por elIndexar y mostrar acciones. Tenemos la parte que escucha page: restore, que establece las columnas de #target_div en seis o tres, según la acción que lo represente.
El resultado final es que #target_div parece animarse a medida que cambiamos de página, pero en realidad es una transición. antes de cambiamos de página y ambas páginas representan el mismo div solo en sus diferentes estados.
0 para la respuesta № 3
Quizás esto http://turbolinks-transitions.herokuapp.com/ Está más cerca de lo que querías. Espere esta funcionalidad en futuras versiones de turbolinks ... o haga un futuro más cercano inventándolo y contribuyendo.