从上到下的背景位置在到达底部时变慢

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

因此，我在加载视图后1秒左右将一个类添加到离子内容中，这将触发转换。

这似乎很好，但问题是，幻灯片一开始很快，然后开始变慢，当它到达底部时，速度真的很慢。

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

Answer 1

developer.mozilla.org/en-US/docs/Web/CSS/-计时自然是一种加速然后减速的简单功能，你似乎想要线性计时。

如果你在MDN上读到关于transition-timing的信息，它会显示：

初始值：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;
}