¿Hay una solución de navegador cruzado para producir una transición deslizante con CSS solamente, sin javascript? A continuación se muestra un ejemplo del contenido html:
Puede usar transiciones CSS3 o quizás animaciones CSS3 para deslizar un elemento.
Para soporte de navegador: http://caniuse.com/
Hice dos ejemplos rápidos para mostrarte cómo me refiero.
Transición de CSS (al pasar el mouse)
Demo One
Código relevante
.wrapper:hover #slide { transition: 1s; left: 0; }
En este caso, estoy left: -100px;
la transición de la posición desde la left: -100px;
a 0;
con un 1s. duración. También es posible mover el elemento usando transform: translate();
Animación CSS
Demo dos
#slide { position: absolute; left: -100px; width: 100px; height: 100px; background: blue; -webkit-animation: slide 0.5s forwards; -webkit-animation-delay: 2s; animation: slide 0.5s forwards; animation-delay: 2s; } @-webkit-keyframes slide { 100% { left: 0; } } @keyframes slide { 100% { left: 0; } }
El mismo principio que el anterior (Demo uno), pero la animación se inicia automáticamente después de 2s, y en este caso he configurado animation-fill-mode
para forwards
, que persistirá en el estado final, manteniendo el div visible cuando termine la animación.
Como dije, dos ejemplos rápidos para mostrar cómo se podría hacer.
EDITAR: para obtener más información sobre las animaciones y transiciones CSS, consulte:
Animaciones
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
Transiciones
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Espero que esto haya ayudado.
transform
2D de CSS3 para evitar problemas de rendimiento (móvil) Una trampa común es animar las propiedades
left
/top
/right
/bottom
en lugar de usar css-transform para lograr el mismo efecto. Por una variedad de razones, la semántica de las transformaciones las hace más fáciles de descargar, pero las funcionesleft
/top
/right
/bottom
son mucho más difíciles.
Fuente: Mozilla Developer Network (MDN)
Manifestación:
var $slider = document.getElementById('slider'); var $toggle = document.getElementById('toggle'); $toggle.addEventListener('click', function() { var isOpen = $slider.classList.contains('slide-in'); $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in'); });
#slider { position: absolute; width: 100px; height: 100px; background: blue; transform: translateX(-100%); -webkit-transform: translateX(-100%); } .slide-in { animation: slide-in 0.5s forwards; -webkit-animation: slide-in 0.5s forwards; } .slide-out { animation: slide-out 0.5s forwards; -webkit-animation: slide-out 0.5s forwards; } @keyframes slide-in { 100% { transform: translateX(0%); } } @-webkit-keyframes slide-in { 100% { -webkit-transform: translateX(0%); } } @keyframes slide-out { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } @-webkit-keyframes slide-out { 0% { -webkit-transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); } }
Aquí hay otra solución que usa la transformación css (para fines de rendimiento en dispositivos móviles, vea la respuesta de @ mate64) sin tener que usar animaciones y fotogtwigs clave.
Creé dos versiones para deslizar desde cualquier lado.
$('#toggle').click(function() { $('.slide-in').toggleClass('show'); });
.slide-in { z-index: 10; /* to position it in front of the other content */ position: absolute; overflow: hidden; /* to prevent scrollbar appearing */ } .slide-in.from-left { left: 0; } .slide-in.from-right { right: 0; } .slide-in-content { padding: 5px 20px; background: #eee; transition: all .5s ease; /* our nice transition */ } .slide-in.from-left .slide-in-content { transform: translateX(-100%); -webkit-transform: translateX(-100%); } .slide-in.from-right .slide-in-content { transform: translateX(100%); -webkit-transform: translateX(100%); } .slide-in.show .slide-in-content { transform: translateX(0); -webkit-transform: translateX(0); }
UTILIZAR ESTO PARA DERECHO A DESLIZAMIENTO IZQUIERDO:
HTML:
CSS:
/*nav*/ .nav{ position: fixed; right:0; top: 70px; width: 250px; height: calc(100vh - 70px); background-color: #333; transform: translateX(100%); transition: transform 0.3s ease-in-out; } .nav-view{ transform: translateX(0); } .nav ul{ margin: 0; padding: 0; } .nav ul li{ margin: 0; padding: 0; list-style-type: none; } .nav ul li a{ color: #fff; display: block; padding: 10px; border-bottom: solid 1px rgba(255,255,255,0.4); text-decoration: none; }
JS:
$(document).ready(function(){ $('a#click-a').click(function(){ $('.nav').toggleClass('nav-view'); }); });
ARCHIVO DE TUTORIAL Y FUENTE: [VER ESTE VÍDEO] [1]
DEMO: http://www.themeswild.com/read/slide-navigation-left-to-right