在添加和删除两个类之间添加动画 [英] Adding animation between adding and removing two classes

问题描述

我正在制作下面的演示.为什么我无法在添加和删除两个类 fixed-top 和 fixed-bottom 之间生成平滑过渡(类似于平滑滚动)，而我已经将以下 css 角色添加到他们?

 -webkit-transition:所有 3s 轻松；-moz-transition:所有 3s 轻松；-o-transition:所有 3s 轻松；过渡:全3s缓解；

var lastScrollTop = 0;$(窗口).滚动(功能(事件){var st = $(this).scrollTop();如果 (st > lastScrollTop) {如果 (st > 500) {$('.box').removeClass("fixed-bottom").addClass("fixed-top");}} 别的 {如果 (st < 500) {$('.box').removeClass("fixed-top").addClass("fixed-bottom");}}lastScrollTop = st;});

html,身体 {高度:100%；}.容器 {高度:2000px；}.盒子 {宽度:100%；高度:50px；背景:#777；}.固定顶{位置:固定；顶部:0；-webkit-transition:所有 3s 轻松；-moz-transition:所有 3s 轻松；-o-transition:所有 3s 轻松；过渡:全3s缓解；}.固定底部{位置:固定；底部:0；-webkit-transition:所有 3s 轻松；-moz-transition:所有 3s 轻松；-o-transition:所有 3s 轻松；过渡:全3s缓解；}

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

做到这一点的最佳方法是什么(上下平稳移动)?

解决方案

因为你没有在 .fixed-top 中设置 bottom 值，在 中设置 top 值，所以条纹会上下跳动.fixed-bottom，那么transition prosessor 无法实现到transition 的属性.您需要让 window.height() 正确过渡.你可以使用 jquery 来做，这会让你的 css 更短看片段

var lastScrollTop = 0;var y = $( window ).height() - $('.box').height() + "px";$('.box').css("top", y);$(窗口).滚动(功能(事件){var st = $(this).scrollTop();如果 (st > lastScrollTop) {如果 (st > 500) {$('.box').css("bottom", y);$('.box').css("top","0");}} 别的 {如果 (st < 500) {$('.box').css("top", y);$('.box').css("bottom","0");}}lastScrollTop = st;});

html,身体 {高度:100%；}.容器 {高度:2000px；}.盒子 {宽度:100%；高度:50px；位置:固定；底部:0；背景:#777；-webkit-transition:所有 3s 轻松；-moz-transition:所有 3s 轻松；-o-transition:所有 3s 轻松；过渡:全3s缓解；}

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

I am working on the demo below. Why am I 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>

What is the best way to do this (having smooth moving up and down)?

解决方案

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