css - 背景位置从上到下越到底部越慢

Question

我正在尝试在 Ionic 2 屏幕中创建“超时”视觉效果。所以背景颜色从上到下滑动。

所以这就像用户有一定的时间点击屏幕上的一个元素，从上到下移动的幻灯片显示了这一点。

所以在搜索之后找到了一种方法来做到这一点:

ion-content.content {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, lightblue 50%, white 50%);
  transition: background-position 30s;
}

ion-content.content.timeout {
  background-position: 0 -100%;
}

在模板中:

<ion-content padding text-center [class.timeout]="isViewLoaded">

我在组件本身中这样做:

ionViewDidLoad() {
  setTimeout(() => this.isViewLoaded = true, 1000);
}

所以我在加载 View 后大约 1 秒向 ion-content 添加了一个类，这会触发转换。

这似乎工作正常，但问题是幻灯片开始时非常快，然后开始减速，当它到达底部时它真的非常慢。

有人知道为什么会发生这种情况以及如何解决它吗？ 谢谢!

Answer 1

developer.mozilla.org/en-US/docs/Web/CSS/ - timing is naturally as a ease function which speeds up and then slows down, you seem to be wanting linear timing instread.

如果您在 MDN 上阅读有关 transition-timing 的内容，它将说明:

Initial value: ease

ease 从一开始就加速，然后在接近尾声时减速，就像速度随时间变化的钟形曲线。这就是为什么您的元素速度变慢并且似乎需要很长时间才能最终到达目的地的原因。

请参阅来自 MDN 的图表: https://developer.mozilla.org/files/3434/TF_with_output_gt_than_1.png

在这个页面上: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#CSS_properties_used_to_define_transitions

对此的解决方案是编辑您的 CSS 并使用 linear 方法，该方法不会加速或减速，而是以恒定速度过渡。

ion-content.content {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, lightblue 50%, white 50%);
  transition: background-position 30s linear;
                                      ^^^^^^
}

澄清变化:

ion-content.content {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, lightblue 50%, white 50%);
  transition: background-position 30s;
  transition-timing-function: linear;
}