Trượt vào CSS 3 từ chuyển đổi bên trái

177

Có giải pháp trình duyệt chéo nào để tạo chuyển tiếp trượt chỉ với CSS, không có javascript không? Dưới đây là một ví dụ về nội dung html:

<div>
    <img id="slide" src="http://.../img.jpg />
</div>
css  css-transitions 
— Gimmy
nguồn

Câu trả lời:

285

Bạn có thể sử dụng chuyển tiếp CSS3 hoặc có thể hoạt ảnh CSS3 để trượt trong một phần tử.

Để được hỗ trợ trình duyệt: http://caniuse.com/

Tôi đã làm hai ví dụ nhanh chỉ để cho bạn thấy ý của tôi.

Chuyển đổi CSS (trên di chuột)

Bản demo

Mã liên quan

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

Trong trường hợp này, tôi chỉ chuyển đổi vị trí từ left: -100px;sang 0;1s. thời lượng. Cũng có thể di chuyển phần tử bằng cách sử dụngtransform: translate();

Hoạt hình CSS

Bản demo hai

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

Nguyên tắc tương tự như trên (Demo One), nhưng hoạt ảnh sẽ tự động bắt đầu sau 2 giây và trong trường hợp này tôi đã đặt animation-fill-modethành forwards, sẽ duy trì trạng thái kết thúc, giữ cho div hiển thị khi hoạt ảnh kết thúc.

Như tôi đã nói, hai ví dụ nhanh để cho bạn thấy làm thế nào nó có thể được thực hiện.

EDIT: Để biết chi tiết về Ảnh động và Chuyển tiếp CSS, xem:

Ảnh động

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

Chuyển tiếp

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

Hy vọng điều này sẽ giúp.

— Christofer Vilander
nguồn
174

Sử dụng CSS3 2D transformđể tránh các vấn đề về hiệu suất (di động)

Một cạm bẫy phổ biến là làm động left/ top/ right/ bottomthuộc tính thay vì sử dụngbiến đổi cssđể đạt được hiệu quả tương tự. Vì nhiều lý do, ngữ nghĩa của các phép biến đổi làm cho chúng dễ dàng giảm tải hơn, nhưng left/ top/ right/ bottomkhó khăn hơn nhiều.

Nguồn: Mạng lưới nhà phát triển Mozilla (MDN)

Bản giới thiệu:

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>
Mở rộng đoạn trích

— bạn đời64
nguồn
20

Đây là một giải pháp khác sử dụng biến đổi css (cho mục đích hiệu suất trên điện thoại di động, xem câu trả lời của @ mate64) mà không phải sử dụng hình ảnh động và khung hình chính.

Tôi đã tạo hai phiên bản để trượt vào từ hai bên.

$('#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>
Mở rộng đoạn trích

— w.stoettinger
nguồn
2

SỬ DỤNG NÀY ĐỂ CÓ QUYỀN TRÁCH NHIỆM:

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');
  });
});
— Sharav Nam Kv
nguồn
0

Tôi thích câu trả lời của @ mate64 vì vậy tôi sẽ sử dụng lại điều đó với những sửa đổi nhỏ để tạo ra một slide hoạt hình xuống dưới:

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>
Mở rộng đoạn trích

— codejockie
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.