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

Question

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

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

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

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);
}

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

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

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

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;
}

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

Background position from top to bottom slows down as it reaches the bottom

css

transitions

css-transitions

ionic2