CSS关键帧动画元素到页面顶部

Question

我想一个元素动画我网页的顶部。这是怎么一回事呢：

HTML：

...
<ion-row id="theHistory"></ion-row>
...

CSS：

@keyframes floatBubble {
    0% {
        top:??;
    }
    100% {
        top: 0px;
    }
}
.element-up{
    z-index:10;
    background-color:white;

    -webkit-animation: floatBubble 2s infinite  normal ease-out;
    animation: floatBubble 2s infinite  normal ease-out;
    position: absolute;
}

JS：

scrollToHistory.classList.add('element-up')

要我把什么样的价值在顶部采取离子行的当前位置？或者我必须这样做以另一种方式？

Answer 1

我喜欢@毯螅的解决方案，但我使用transform，这将创建一个比一个top平滑的动画。使用transform/translate盒子将被提升到了自己的渲染层。

我给你框的偏移到custom property和使用存储在translate变量CSS偏移值--move-y箱。

const box = document.querySelector(".box");
box.addEventListener("click", move);

function move(e) {
  const distanceFromTop = (this.offsetTop * -1) + "px";
  this.style.setProperty("--move-y", distanceFromTop);
  this.classList.add("element-up");
}

@keyframes floatBubble {
  to {
    transform: translateY(var(--move-y, 0));
  }
}

div.element-up {
  z-index: 10;
  animation: floatBubble 2s forwards;
  position: absolute;
}

.box {
  width: 50px;
  height: 50px;
  background: red;
}

body {
  margin: 0;
  padding: 50px;
}

<div class="box">
</div>

https://jsfiddle.net/orvcn7y3/

Answer 2

由于使用的是JS，你可以设置动态的top财产，无需添加任何东西到了关键帧：

function move(e) {
  e.style.top = e.offsetTop + "px";
  e.classList.add('element-up');
}

@keyframes floatBubble {
  100% {
    top: 0px;
  }
}

div.element-up {
  z-index: 10;
  animation: floatBubble 2s forwards;
  position: absolute;
}

.box {
  width: 50px;
  height: 50px;
  background: red;
}

body {
 margin:0;
 padding:50px;
}

<div class="box" onclick="move(this)">
</div>