programing

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

muds 2023. 9. 23. 23:08
반응형

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

자바스크립트 없이 CSS로만 슬라이드 인 전환을 할 수 있는 크로스 브라우저 솔루션이 있습니까?다음은 HTML 컨텐츠의 예입니다.

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

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

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

제가 무슨 뜻인지 보여드리기 위해 두 가지 간단한 예를 들었습니다.

CSS 전환(호버 시)

데모 원

관련 코드

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

이 경우에는, 저는 단지 그 자리를 이전하는 것입니다.left: -100px;로.0;지속 시간이 1초입니다를 사용하여 요소를 이동할 수도 있습니다.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; }
}

위와 같은 원리(데모 원)이지만, 2초 후에 애니메이션이 자동으로 시작되고, 이 경우에는 제가 설정을 해두었습니다.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

CSS32 2D 사용transform성능 문제를 피하기 위해 (모바일)

일반적인 함정은 생명력을left/top/right/bottom동일한 효과를 얻기 위해 transform를 사용하는 대신 속성.다양한 이유로 인해 변환의 의미론은 오프로드하기 쉽지만,left/top/right/bottom훨씬 더 어려운 일입니다.

출처: 모질라 개발자 네트워크(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>

@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>

우측에서 좌측으로 슬라이딩할 때 사용:

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


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>

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>

언급URL : https://stackoverflow.com/questions/16989585/css-3-slide-in-from-left-transition

반응형

'programing' 카테고리의 다른 글

객체를 배열로 변환  (0) 2023.09.23
Oracle 데이터 펌프 내보내기 유틸리티를 사용하여 로컬 시스템에서 덤프 파일을 만드는 방법은 무엇입니까?  (0) 2023.09.23
Aligning text in SVG  (0) 2023.09.18
WooCommerce - 제품 카테고리 슬러그를 상점 기반으로 변경  (0) 2023.09.18
SQLSTATE[HY093]:잘못된 매개 변수 번호: 바인딩된 변수 수가 102행의 토큰 수와 일치하지 않습니다.  (0) 2023.09.18

'programing'의 다른글

  • 현재글왼쪽 전환에서 CSS 3 슬라이드 인

관련글

댓글

티스토리툴바