Question

我在弄清楚如何最好地运用这个动画时遇到了一些麻烦。

我有两个在flexbox布局中垂直居中的元素，我希望通过从屏幕外滑动来让这些元素动画到最终位置，但是，这似乎给了我一些意想不到的结果我假设因为他们的弹性定位。关于如何解决这个问题的任何想法？

这是一个显示当前状态的掠夺者，我放慢了动画的速度，这样你就可以看到困境以及我想要采取的方式。

function checkForm() {
  var form = $("#<%= form1.ClientID %>")[0];
  if (!form.checkValidity()) {
    if (form.reportValidity) {
      //Show errors on form fields
      form.reportValidity();
    }
    else {
      //Fall-back for browsers that don't support reportValidity()
    }
    return false;
  }
  return true;
}

https://plnkr.co/edit/MPyuTSjy2s5XWLk5EVVD?p=preview

Answer 1

当使用translate的百分比时，它指的是元素自身的大小，这意味着，如果元素高200像素，translateY(100%)将移动200px（自身高度的100％）下来。

在这种情况下，您可以使用视口单位，即transform: translateY(100vh);，这意味着无论高度如何，它都会将元素放置在视口的底部。

Updated codepen

在屏幕上启动弹性元素到动画到位

1 个答案: