添加和删​​除两个类之间添加动画的问题 [英] Issue on Adding Animation Between Adding and Removing Two Classes

问题描述

你可以看看这个演示，让我知道为什么我不能在添加和删除两个类之间生成平滑过渡（类似Smooth Scroll） fixed-top 和 fixed-bottom ，而我已经添加了以下css角色？

Can you please take a look at this demo and let me know why I am not able to generate smooth transition (something like Smooth Scroll) between adding and removing two classes fixed-top and fixed-bottom while I already added following css roles into them?

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

你能否让我知道什么是最好的方法（有平滑的上下移动）？

can you please let me know what is the best way to do this (Having smooth moving up and down)?

推荐答案

条带会上下跳动，因为您没有在顶部并且顶部在 .fixed-bottom 内，则转换探测器无法实现传递的属性。你需要得到window.height（）正确地过渡。你可以使用jquery做它，使你的css更短
查看代码片段

A stripe jumps up and down because you didn't set values of bottom within .fixed-top and top within .fixed-bottom, then transition prosessor can't realize wich attribute to transite. You need to get window.height() to transite properly. You can do it using jquery, wich makes your css shorter Look at snippet

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>

这篇关于添加和删​​除两个类之间添加动画的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！