Problem beim Hinzufügen von Animationen zwischen dem Hinzufügen und Entfernen von zwei Klassen

Question

Können Sie bitte einen Blick auf diese Demo werfen und mir mitteilen, warum ich keinen fließenden Übergang zwischen dem Hinzufügen und Entfernen von zwei Klassen fixed-top und fixed-bottom erzeugen kann während ich bereits folgende Css-Rollen hinzugefügt habe?

-webkit-transition: all 3s ease; 
    -moz-transition: all 3s ease; 
    -o-transition: all 3s ease; 
    transition: all 3s ease; 

var lastScrollTop = 0; 
 
$(window).scroll(function(event) { 
 
    var st = $(this).scrollTop(); 
 
    if (st > lastScrollTop) { 
 
    if (st > 500) { 
 
     $('.box').removeClass("fixed-bottom").addClass("fixed-top"); 
 
    } 
 
    } else { 
 
    if (st < 500) { 
 
     $('.box').removeClass("fixed-top").addClass("fixed-bottom"); 
 
    } 
 
    } 
 
    lastScrollTop = st; 
 
});

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    height: 2000px; 
 
} 
 

 
.box { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #777; 
 
} 
 

 
.fixed-top { 
 
    position: fixed; 
 
    top: 0; 
 
    -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
} 
 

 
.fixed-bottom { 
 
    position: fixed; 
 
    bottom: 0; 
 
    -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="box fixed-bottom"></div> 
 
</div>

Sie bitte lassen Sie mich wissen, was der beste Weg, dies zu tun (mit glatten Auf- und Abbewegung)?

Answer 1

Ein Streifen springt auf und ab, weil Sie keine Werte von unten innerhalb .fixed-top und oben innerhalb .fixed-bottom gesetzt haben, dann kann der Übergangsprozessor nicht erkennen, welches Attribut zu transite ist. Sie müssen window.height() aufrufen, um ordnungsgemäß zu transite. Sie können es mit Jquery, Wich macht Ihre css kürzer Blick auf Schnipsel

var lastScrollTop = 0; 
 
var y = $(window).height() - $('.box').height() + "px"; 
 
$('.box').css("top", y); 
 
$(window).scroll(function(event) { 
 
    var st = $(this).scrollTop(); 
 
    if (st > lastScrollTop) { 
 
    if (st > 500) { 
 
     $('.box').css("bottom", y); 
 
     $('.box').css("top","0"); 
 
    } 
 
    } else { 
 
    if (st < 500) { 
 
     $('.box').css("top", y); 
 
     $('.box').css("bottom","0"); 
 
    } 
 
    } 
 
    lastScrollTop = st; 
 
});

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    height: 2000px; 
 
} 
 

 
.box { 
 
    width: 100%; 
 
    height: 50px; 
 
    position: fixed; 
 
    bottom: 0; 
 
    background: #777; 
 
    -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="box fixed-bottom"></div> 
 
</div>