Відповіді:
Ви можете використовувати переходи CSS3 або, можливо, анімацію CSS3, щоб просунути елемент.
Для підтримки браузера: http://caniuse.com/
Я зробив два швидкі приклади, щоб просто показати вам, як я маю на увазі.
CSS-перехід (на наведення курсора)
Відповідний код
.wrapper:hover #slide {
transition: 1s;
left: 0;
}
У цьому випадку я просто переходжую позицію з left: -100px;
на 0;
1s. тривалість. Можна також перемістити елемент за допомогоюtransform: translate();
CSS анімація
#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; }
}
Той же принцип, що і вище (Demo One), але анімація починається автоматично після 2s, і в цьому випадку я налаштував animation-fill-mode
на forwards
, який буде зберігатися в кінцевому стані, зберігаючи ДІВ видима , коли анімація закінчується.
Як я вже сказав, два швидких прикладу, щоб показати вам, як це можна зробити.
EDIT: Докладнішу інформацію про анімації та переходи CSS див .:
Анімації
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
Переходи
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Сподіваюся, що це допомогло.
transform
щоб уникнути проблем із продуктивністю (для мобільних пристроїв)Поширена помилка полягає в морського
left
/top
/right
/bottom
властивостей , замість того , щоб використовуватиcss-перетвореннядосягти того ж ефекту. З різних причин семантика перетворень полегшує їх розвантаження, алеleft
/top
/right
/bottom
набагато складніше.
Джерело: Мережа розробників Mozilla (MDN)
Демонстрація:
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>
Ось ще одне рішення, що використовує перетворення css (для ефективності на мобільних пристроях див. Відповідь @ mate64) без використання анімації та ключових кадрів.
Я створив дві версії для введення з будь-якої сторони.
$('#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: transform .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>
ВИКОРИСТОВУЙТЕ ЦЕ ДЛЯ ПРАВА НА СЛІВЛЕННЯ ВЛИВО:
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');
});
});
Мені сподобалась відповідь @ mate64, тому я збираюсь повторно використовувати її з невеликими модифікаціями, щоб створити анімацію вниз і вгору внизу:
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: translateY(-100%);
-webkit-transform: translateY(-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: translateY(0%); }
}
@-webkit-keyframes slide-in {
100% { -webkit-transform: translateY(0%); }
}
@keyframes slide-out {
0% { transform: translateY(0%); }
100% { transform: translateY(-100%); }
}
@-webkit-keyframes slide-out {
0% { -webkit-transform: translateY(0%); }
100% { -webkit-transform: translateY(-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>