CSS 3-Folie von links Übergang

Question

Gibt es eine Cross-Browser-Lösung, um eine Folie-Übergang mit nur CSS, kein Javascript zu erzeugen? Im Folgenden ist ein Beispiel für den HTML-Inhalt:

<div> 
    <img id="slide" src="http://.../img.jpg /> 
</div> 

Answer 1

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

Für Browser-Unterstützung: http://caniuse.com/

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

CSS Übergang (Hover)

Demo One

Relevante-Code

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

In diesem Fall Übergang Im gerade die Position left: -100px;-0; mit 1s. Dauer. Es ist auch möglich, das Element bewegen Sie mit transform: translate();

CSS-Animation

Demo Two

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

gleiches Prinzip wie oben (Demo One), aber die Animation startet automatisch nach 2 s, und in diesem Fall Ich habe animation-fill-mode zu forwards gesetzt, das den Endzustand beibehalten wird, das div sichtbar zu halten, wenn die Animation endet.

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

EDIT: Einzelheiten zu CSS Animationen und Übergänge zu sehen:

Animationen

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

Hoffnung half dies.

Answer 2

Verwenden CSS3 2D transform um Leistungsprobleme zu vermeiden (mobile)

A gemeinsame pitfall ist left/top/right/bottom Eigenschaften zu animieren, statt css-transform zur Verwendung derselben zu erreichen bewirken.Aus einer Vielzahl von Gründen erleichtert die Semantik von Transformationen das Entladen, aber/right/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%); } 
 
}

<div id="slider" class="slide-in"> 
 
    <ul> 
 
     <li>Lorem</li> 
 
     <li>Ipsum</li> 
 
     <li>Dolor</li> 
 
    </ul> 
 
</div> 
 

 
<button id="toggle" style="position:absolute; top: 120px;">Toggle</button>

Answer 3

Verwenden Sie diese für rechts schieben nach links:

HTML:

<div class="nav "> 
     <ul> 
     <li><a href="#">HOME</a></li> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">SERVICES</a></li> 
     <li><a href="#">CONTACT</a></li> 
     </ul> 
    </div> 

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: [dieses Video ansehen] [1]

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

Answer 4

Hier ist eine andere Lösung mit css-Transformation (für Performance-Zwecke auf Handys, siehe Antwort von @ mate64) ohne die Verwendung von Animationen und Keyframes.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slide-in from-left"> 
 
    <div class="slide-in-content"> 
 
    <ul> 
 
     <li>Lorem</li> 
 
     <li>Ipsum</li> 
 
     <li>Dolor</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div class="slide-in from-right"> 
 
    <div class="slide-in-content"> 
 
    <ul> 
 
     <li>One</li> 
 
     <li>Two</li> 
 
     <li>Three</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<button id="toggle" style="position:absolute; top: 120px;">Toggle</button>