在轉換結束時添加新動畫

Question

我正在使用腳本使內容框從入口處滑入頂部，然後在退出時滑落。

然而，當你點擊內容框一按鈕，然後內容框二，然後又回到一個，從底部而不是頂部進入的時候，它幾乎可以很好地工作。

我想我明白爲什麼會發生這種情況（因爲代碼全部在一個命中中運行，因此不是從視口下方，而是從視口上方，再到視圖上方，然後進入視圖，它只是從下面進入視圖），但無法弄清楚如何使它始終從頂部進入。

HTML：

<div class="slidey slidey1 enter"> 
    Content Box 1 
</div> 
<div class="slidey slidey2"> 
    Content Box 1 
</div> 
<div class="slidey slidey3"> 
    Content Box 1 
</div> 

CSS：

.slidey { top:-100% } 
.enter { top:0; transition: all 0.7s ease-in-out; } 
.exit { top:100%; transition: all 0.7s ease-in-out; } 

的jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".changer").click(function(){ 
    if ($(".slidey" + $(this).data("slidey")).hasClass("enter")) { 
     return false 
    } else { 
     $(".slidey").removeClass("exit"); 
     $(".slidey.enter").addClass("exit").removeClass("enter"); 
     $(".slidey" + $(this).data("slidey")).addClass("enter"); 
     $(".changer").removeClass("link_change"); 
     $(".changer" + $(this).data("slidey")).addClass("link_change"); 
     return false; 
    } 
    }); 
}); 
</script> 

的頁面不再是可被查看。

Answer 1

添加類後，您應先分配"transitionend"聽衆喜歡即：

$(".myElement").addClass("transitionClass").on("transitionend", function() { 
    // Transition ended. 
    // Do more stuff. 
}); 

我重建，並簡化了你的HTML，CSS創建這個例子，所以你可能要忽略的那部分，而是着眼於jQ代碼。即使在開箱即用的頁面上也應該可以正常工作。

$(document).ready(function(){ 
 
    
 
    var $slides = $(".slidey"); 
 
    
 
    $(".changer").click(function(e){ 
 
    e.preventDefault(); // Instead of return false; 
 
    var num = $(this).data("slidey"); 
 
    var $target = $(".slidey"+ num); 
 
    
 
    $(".enter").not($target) // (not the already active one) 
 
     .removeClass("enter") // remove unwanted classes 
 
     .addClass("exit")  // make it go to bottom 
 
     .on("transitionend", function(){ // snap it back to -100% top... 
 
       $(this).removeClass("exit"); // by removing the exit class. 
 
     }); 
 

 
    $target.addClass("enter"); // Animate current down into view 
 
    
 
    // UL links 
 
    $(".changer").removeClass("link_change"); 
 
    $(this).addClass("link_change"); 
 

 
    }); 
 
    
 
});

*{margin:0;} 
 
html, body{height:100%;} 
 
body{overflow:hidden;} 
 

 
#navbar{ 
 
    position:absolute; 
 
    bottom:130px; 
 
    right:130px; 
 
} 
 
#navbar ul {list-style:none;} 
 

 
.link_change{ 
 
    color:fuchsia; 
 
} 
 

 
.slidey { 
 
    position:absolute; 
 
    width:50%; 
 
    height:90vh; 
 
    background:#ddd; 
 
    top:-100%; 
 
} 
 
.enter { 
 
    top:0; 
 
    transition: all 0.7s ease-in-out; 
 
} 
 
.exit { 
 
    top:100%; 
 
    transition: all 0.7s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="navbar"> 
 
    <ul id="navlinks"> 
 
    <li class="changer changer1 link_change" data-slidey="1">home</li> 
 
    <li class="changer changer2" data-slidey="2">profile</li> 
 
    <li class="changer changer3" data-slidey="3">message</li> 
 
    </ul> 
 
</div> 
 

 
<div class="slidey slidey1 enter">Content Box 1</div> 
 
<div class="slidey slidey2">Content Box 2</div> 
 
<div class="slidey slidey3">Content Box 3</div>