Existe-t-il une solution multi-navigateurs pour produire une transition avec CSS uniquement, sans javascript? Voici un exemple du contenu HTML:
Vous pouvez utiliser des transitions CSS3 ou peut-être des animations CSS3 pour insérer un élément.
Pour le support du navigateur: http://caniuse.com/
J’ai fait deux exemples rapides pour vous montrer comment je veux dire.
Transition CSS (en survol)
Une démo
Code pertinent
.wrapper:hover #slide { transition: 1s; left: 0; }
Dans ce cas, je left: -100px;
juste la transition de la position de left: -100px;
à 0;
avec un 1 durée. Il est également possible de déplacer l’élément en utilisant transform: translate();
Animation CSS
Démo Deux
#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; } }
Même principe que ci-dessus (Demo One), mais l’animation démarre automatiquement après 2s, et dans ce cas, j’ai placé animation-fill-mode
en forwards
, ce qui persistera dans l’état final, maintenant le div visible lorsque l’animation se termine.
Comme je l’ai dit, deux exemples rapides pour vous montrer comment cela pourrait être fait.
EDIT: Pour plus de détails concernant les animations CSS et les transitions, voir:
Des animations
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
Transitions
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
J’espère que cela a aidé.
transform
2D CSS3 pour éviter les problèmes de performances (mobile) Un piège courant consiste à animer les propriétés
left
/top
/right
/bottom
au lieu d’utiliser css-transform pour obtenir le même effet. Pour diverses raisons, la sémantique des transformations les rend plus faciles à décharger, mais les opérationsleft
/top
/right
/bottom
sont beaucoup plus difficiles.
Source: Réseau de développeurs Mozilla (MDN)
Démo:
var $slider = document.getElementById('slider'); var $toggle = document.getElementById('toggle'); $toggle.addEventListener('click', function() { var isOpen = $slider.classList.contains('slide-in'); $slider.setAtsortingbute('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%); } }
Voici une autre solution utilisant la transformation css (à des fins de performances sur les mobiles, voir la réponse de @ mate64) sans avoir à utiliser d’animations et d’images clés.
J’ai créé deux versions à insérer de chaque côté.
$('#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); }
UTILISEZ CE POUR DROIT À GAUCHE:
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'); }); });
FICHIER TUTORIAL ET SOURCE: [REGARDEZ CETTE VIDÉO] [1]
DEMO: http://www.themeswild.com/read/slide-navigation-left-to-right