왼쪽 전환에서 CSS 3 슬라이드 인

177

자바 스크립트없이 CSS만으로 슬라이드 인 전환을 생성하는 크로스 브라우저 솔루션이 있습니까? 아래는 html 컨텐츠의 예입니다.

<div>
    <img id="slide" src="http://.../img.jpg />
</div>
css  css-transitions 
— 기미
소스

답변:

286

CSS3 전환 또는 CSS3 애니메이션을 사용하여 요소를 슬라이드 할 수 있습니다.

브라우저 지원 : http://caniuse.com/

내가 의미하는 바를 보여주기 위해 두 가지 간단한 예를 만들었습니다.

CSS 전환 (마우스 오버시)

데모 하나

관련 코드

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

이 경우 Im은 위치를 1s left: -100px;로 전환합니다 0;. 지속. 요소를 사용하여 요소를 이동할 수도 있습니다transform: translate();

CSS 애니메이션

데모 2

#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)이지만 2 초 후에 애니메이션이 자동으로 시작되며이 경우 종료 상태를 유지하여 애니메이션이 끝날 때 div를 유지하도록로 설정 animation-fill-mode했습니다 forwards.

내가 말했듯이, 어떻게 할 수 있는지 보여주는 두 가지 간단한 예입니다.

편집 : 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

이것이 도움이 되었기를 바랍니다.

— 크리스토퍼 빌란 더
소스
174

CSS3 2D 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>
스 니펫 확장

— mate64
소스
20

다음은 애니메이션과 키 프레임을 사용하지 않고 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>
스 니펫 확장

— w.stoettinger
소스
2

왼쪽 슬라이딩 권리를 위해 이것을 사용하십시오 :

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');
  });
});
— 샤 라브 난 Kv
소스
0

@ 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>
스 니펫 확장

— 코드 조키
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.