背景位置從頂部到底部減慢，因爲它到達底部

我試圖在離子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

背景位置從頂部到底部減慢，因爲它到達底部

回答

相關問題