过渡锚侧

Question

我有一个容器，其中包含一些东西，包括底部的盒子。我需要将该框从底部过渡到顶部。

from {
    bottom: 4px;
    top: auto;
}
to {
    bottom: auto;
    top: 4px;
}

由于显而易见的原因，这不起作用。您无法使用auto值进行转换/动画处理。我通过让盒子淡出并从底部滑下来然后淡入并在顶部滑动来解决这个问题。这有效，但感觉比它需要的时间长。

该框具有动态高度，整个事物都具有响应性，因此预先计算出的值是正确的。

有什么想法吗？或者我现在能做的最好的是什么？

Answer 1

所以它绝对可行，但您可以使用top和{{1}来实现它，而不是尝试使用bottom和top的组合来实现它。 }}。这样您就可以清楚地了解停止和开始，同时仍然可以自由地使用自适应容器。

它看起来像这样：

translate

以下是一个实例，（我使用了from { top: 4px; transform: translateY(0); } to { top: calc(100% - 4px); transform: translateY(-100%); } ，以便您可以调整大小并继续测试，按钮（+ js）就在那里以帮助促进班级改变）

＆＃13;

＆＃13;

textarea

＆＃13;

$('.go').click(function(){
    $('textarea').toggleClass('up');
});

＆＃13;

textarea {
  position: fixed;
  top: 0;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
  left: 150px;
}

textarea.up {
  top: 100%;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

＆＃13;

＆＃13;

＆＃13;

和Fiddle if you prefer that instead。

Answer 2

您可以使用top CSS函数模拟calc()属性：

from {
    bottom: 4px;
}
to {
    bottom: calc(100% - 4px - yourContainerHeight);
}

Answer 3

您可以使用动画来执行此操作。您无需从下到上进行更改。只需使用其中一个。我选择使用'底部'。然后，为了模拟top:4px，您可以使用bottom:calc(100% - 4px)和transform:translateY(100%)移动框。这等于top:4px。

请参阅下面的代码段

.container {
  height: 300px;
  width: 300px;
  border: 1px solid red;
  position: relative;
}

.box {
  position: absolute;
  bottom: 4px;
  background: red;
  width: 100%;
  height: 10px;
  animation-name: fromBottom;
  animation-delay: 1s;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  transform: translateY(0%)
}

@keyframes fromBottom {
  0% {
    bottom: 0;
    transform: translateY(0%)
  }
  100% {
    bottom: calc(100% - 4px);
    transform: translateY(100%)
  }
}

<div class="container">
  <div class="box">

  </div>
</div>