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/ - 时间自然地作为一个缓和功能，加速然后减慢，你似乎想要线性定时instread。

如果您在MDN上阅读transition-timing，请说明：

初始值：轻松

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

从顶部到底部的背景位置在到达底部时减慢

1 个答案: