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

由于您使用的是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>

Answer 2

我喜欢@Temani的解决方案，但是我的使用transform，它创建的动画比top更平滑。使用transform/translate，该框将被提升到其自己的渲染层。

我使用存储在translate变量CSS中的偏移量将框的偏移量分配给custom property和--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/

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

2 个答案: