单击时更改CSS过渡中的最低和最高值 [英] Changing bottom and top values in a CSS transition on click

问题描述

我有一个 div 和一个固定的 位置，该位置应该会在点击时向上/向下滑动。我正在尝试使它与平滑的CSS 过渡一起使用，但是单击后它只会向上/向下跳转。我可能在这里遗漏了一些明显的东西，但无法弄清楚。

I have a div with a fixed position that is supposed to slide up/down on click. I'm trying to get this to work with a smooth CSS transition but it only jumps up/down when clicked. I'm probably missing something obvious here but can't figure out what.

有什么想法吗？

我在这里创建了一个演示。

I've created a demo here.

我的CSS：

  .wrapper {
      position: fixed;
      bottom: 30px;
      top: initial;
      background: green;
      width: 100%;
      height: 20px;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
  }
  .wrapper.slide-up {
      top: 0px;
      bottom: initial;
  }
  .wrapper.slide-down {
      top: auto;
      bottom: 36px;
  }

我的JS：

  var wrapper = $('.wrapper');

  $(wrapper).click(

  function () {
      if (wrapper.hasClass('slide-up')) {
          wrapper.addClass('slide-down').removeClass('slide-up');
      } else {
          wrapper.removeClass('slide-down').addClass('slide-up');
      }
  });

推荐答案

您不能使用顶部和底部可以互换。您需要拥有一种需要更改的样式。

You can't use top and bottom interchangeably. You need to have one style you need to change.

例如：

.wrapper.slide-up {
  top: 0px;
}
.wrapper.slide-down {
   top: calc(100% - 36px);
}

JSFiddle

您可以使用 calc CSS函数运行

You can use the calc css function to work out exactly what you need.

top: calc(100% - 36px);

但是您需要确保在执行过渡时将其保留为一个元素你需要改变。因此，当您有两个不同的 top 值时，而当您引入 top 会给它动画。 >底部未设置时，只会跳转。

But you need to make sure that when you're doing transitions, you keep it to one element that you need to change. So top will give it the animation when you have two different top values, but when you introduce bottom when it's not set, it will just 'jump'.

使用 calc（）<时要小心/ code>，因为在旧版浏览器中不完全支持：

Be careful when using calc() as it isn't fully supported in older browsers:

我可以使用-Calc（）

这篇关于单击时更改CSS过渡中的最低和最高值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！