CSS 3-Einschub vom linken Übergang

Gibt es eine Cross-Browser-Lösung, um einen Dia-In-Übergang nur mit CSS zu erstellen, ohne JavaScript? Im Folgenden finden Sie ein Beispiel für den HTML-Inhalt:

   

Sie können CSS3-Übergänge oder vielleicht CSS3-Animationen verwenden, um in einem Element zu gleiten.

Für den Browser-Support: http://caniuse.com/

Ich habe zwei schnelle Beispiele gemacht, nur um Ihnen zu zeigen, wie ich meine.

CSS-Übergang (bei Hover)

Demo Eins

Relevanter Code

 .wrapper:hover #slide { transition: 1s; left: 0; } 

In diesem Fall übertrage ich nur die Position von left: -100px; zu 0; mit 1s. Dauer. Es ist auch möglich, das Element mithilfe von transform: translate();

CSS-Animation

Demo zwei

 #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; } } 

Das gleiche Prinzip wie oben (Demo One), aber die Animation startet automatisch nach 2s, und in diesem Fall habe ich den animation-fill-mode auf forwards , wodurch der End-Zustand beibehalten und das div beim Beenden der Animation sichtbar bleibt.

Wie ich schon sagte, zwei schnelle Beispiele, um Ihnen zu zeigen, wie es gemacht werden könnte.

BEARBEITEN: Für Details zu CSS-Animationen und Übergängen siehe:

Animationen

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Übergänge

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Hoffe das hat geholfen.

Verwenden Sie CSS3 2D- transform , um performancesprobleme zu vermeiden (mobil)

Ein häufiger Fallstrick besteht darin, left Eigenschaften left / top / right / bottom zu animieren, anstatt css-transform zu verwenden, um denselben Effekt zu erzielen. Aus einer Vielzahl von Gründen erleichtert die Semantik von Transformationen das Auslagern, aber left / top / right / bottom sind viel schwieriger.

Quelle: Mozilla Developer Network (MDN)


Demo:

 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%); } } 
 
  • Lorem
  • Ipsum
  • Dolor

Hier ist eine andere Lösung, die css-Transformation verwendet (für performanceszwecke auf Handys, siehe Antwort von @ mate64), ohne dass Animationen und Keyframes verwendet werden müssen.

Ich habe zwei Versionen zum Einschieben von jeder Seite erstellt.

 $('#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); } 
  
  • Lorem
  • Ipsum
  • Dolor
  • One
  • Two
  • Three

BENUTZEN SIE DIESE FÜR LINKSFAHRT:

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'); }); }); 

TUTORIAL- UND QUELLE-DATEI: [DIESES VIDEO ANSEHEN] [1]

DEMO: http://www.themeswild.com/read/slide-navigation-left-to-right