CSS 3 slide-in z lewego przejścia

Question

Czy istnieje rozwiązanie oparte na wielu przeglądarkach, które umożliwia przejście w sam środek CSS bez javascript? Poniżej znajduje się przykład zawartości html:

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

Answer 1

Można użyć przejścia CSS3 animacje CSS3 czy może ślizgać się w elemencie.

uzyskać pomoc Przeglądarka: http://caniuse.com/

Zrobiłem dwa krótkie przykłady, żeby pokazać, jak mówię.

CSS przejściowy (przy aktywowaniu)

Demo One

odpowiedni kod

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

W tym przypadku, Im po prostu przejście z pozycji left: -100px; do 0; z 1s. Trwanie. Możliwe jest również, aby przenieść element używając transform: translate();

animacji CSS

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

samej zasadzie jak wyżej (Demo One), ale animacja rozpoczyna się automatycznie po 2s, a w tym przypadku Ustawiłem animation-fill-mode na forwards, które będzie utrzymywało stan końcowy, utrzymując div widoczny po zakończeniu animacji.

Tak jak powiedziałem, dwa szybkie przykłady, aby pokazać, jak można to zrobić.

EDIT: Szczegóły dotyczące animacji CSS i przejść zobaczyć:

Animacje

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

Przejścia

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

Nadzieja to pomogło.

Answer 2

Zastosowanie CSS 3 2D transform, aby uniknąć problemów z wydajnością (mobilnych)

wspólny pułapka jest animowanie left/top/right/bottom właściwości zamiast stosowania css-transform osiągnąć takie same efekt.Z różnych powodów semantyka przekształceń ułatwia ich odciążanie, ale są znacznie trudniejsze.

Źródło: 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

użyć tego do prawej do lewej przesuwny:

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

kursu i Plik źródłowy: [Ten film] [1]

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

Answer 4

Oto inne rozwiązanie wykorzystujące transformację css (dla celów wydajności w telefonach komórkowych, patrz odpowiedź @ mate64) bez konieczności korzystania z animacji i klatek kluczowych.

Stworzyłem dwie wersje do wsuwania z każdej strony.

$('#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>