背景位置从顶部到底部减慢，因为它到达底部

我试图在离子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秒后向ion-content添加一个类，并触发转换。

这似乎工作得很好，但问题是，幻灯片在开始时真的很快，然后开始减慢，到达底部时真的很慢。

任何人有一个想法，为什么发生这种情况，以及如何解决它？谢谢！

来源

2017-02-14 David

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function - 定时是天然作为'易于'加快速度，然后放慢速度的功能，你似乎想'线性'时间线上阅读.. – Martin

明白了，谢谢！ – David

事情不是我想要1秒的延迟;如果我在加载视图时不添加该类，那么已经添加了时间轴，并且背景位置已经是'0 -100％'，所以没有过渡，背景已经是白色。 – David

developer.mozilla.org/en-US/docs/Web/CSS/ - 时间自然就是一个缓慢的函数，它加速然后放慢速度，你似乎想要线性时序的未读。

如果您在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; 
}

来源

2017-02-14 11:56:11 Martin

背景位置从顶部到底部减慢，因为它到达底部

回答

相关问题