0
오버플로가 숨겨진 래퍼 안에 절대적으로 배치 된 여러 개의 스크린이 있습니다.jQuery 토글 클래스에서 CSS 전환이 작동하지 않습니다.
각 화면 내의 링크를 클릭하면 jQuery가 대상의 위치 지정 클래스를 제거하고 한 화면에서 다른 화면으로 화면 사이에 부드러운 슬라이드 전환을 만들고 싶습니다. 전류가 화면에서 나오고 다음 화면이 오른쪽 또는 상단에서 슬라이딩하여 뷰포트로 들어갑니다 (다음 화면에 따라 다름).
하지만 CSS 전환이 작동하지 않습니다. 부드러운 화면 전환 대신 한 화면에서 다른 화면으로 점프합니다.
여기에 무슨 문제가 있습니까?
여기에 JS fiddle이 있습니다.
그리고 코드
: 당신의 도움에 대한function slideScreens(a,t, e) {
\t if(t == 'screen--5'){
\t a.addClass('bottom');
\t $(".is-visible").removeClass("is-visible");
\t $("."+t).addClass("is-visible").removeClass("top");
\t } else {
\t a.addClass('left');
\t $(".is-visible").removeClass("is-visible");
\t $("."+t).addClass("is-visible").removeClass("right");
\t }
};
$(function() {
\t $('.screen a').on('click', function(e) {
\t e.preventDefault();
\t var target = $(this).attr('href');
\t \t slideScreens($(this),target, e);
\t });
});.wrapper__banner {
width: 100%;
height: 400px;
overflow: hidden;
border: 2px solid black; }
.screens {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%; }
.screen {
position: absolute;
width: 100%;
height: 100%; }
.screen--1 {
background: red; }
.screen--2 {
background: lightblue; }
.screen--3 {
background: green; }
.screen--4 {
background: pink; }
.screen--5 {
background: grey; }
.screen {
padding: 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }
.screen.right {
left: 100%; }
.screen.left {
right: 100%; }
.screen.top {
bottom: 100%; }
.screen.bottom {
top: 100%; }<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<section class='wrapper__banner'>
\t <div class='screens'>
\t \t <div class='screen screen--1 is-visible'>
\t \t \t screen--1
\t \t \t <a href="screen--2">to screen 2</a>
\t \t </div>
\t \t <div class='screen screen--2 right'>
\t \t \t screen--2
\t \t \t \t <a href="screen--3">to screen 3</a>
\t \t \t \t <a href="screen--5">show screen 5</a>
\t \t </div>
\t \t <div class='screen screen--3 right'>
\t \t \t screen--3
\t \t \t \t <a href="screen--4">to screen 4</a>
\t \t </div>
\t \t <div class='screen screen--4 right'>
\t \t \t screen--4
\t \t </div>
\t \t <div class='screen screen--5 top'>
\t \t \t screen--5
\t \t </div>
\t </div>
</section>감사합니다.
윙윙 거리는 소리가 들릴 때 불투명도를 적용하려면 여기로 이동하십시오. ggled. 이벤트가 원하는 효과가 아니라면, 내가 원하는 애니메이션의 기본 값을 설정해야한다는 understant입니다. 예를 들어 주셔서 감사합니다. –