添加和删​​除两个类之间添加动画的问题

Question

请你看一下这个演示，让我知道为什么我在添加和删除两个类<input type="text" ng-model="searchBuddy" placeholder="search"/> <div class="square"> <div class="list no-padding" ng-repeat="buddy in buddyList |searchBuddy'> <a class="item item-avatar" href="#"> <img src="{{buddy.photoURL}}"> <h2>{{buddy.firstname}}</h2> <p>{{buddy.lastname}}</p> </a> </div> </div> 和fixed-top之间无法生成平滑过渡（类似Smooth Scroll）已经添加了以下css角色？

fixed-bottom

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

你可以告诉我这是做什么的最佳方式（顺利上下移动）吗？

Answer 1

条纹上下跳跃是因为你没有在.fixed-top内设置底部值而在.fixed-bottom内设置顶部，然后转换prosessor无法实现转换属性。你需要让window.height（）正确转换。你可以使用jquery做到这一点，这会让你的css缩短 看一下片段

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>