如何在變換後製作不透明度轉換

我正在嘗試製作類似fullpage.js的內容。我有一個活動元素和以前的元素。當我滾動我對兩個塊變換屬性，一個像如何在變換後製作不透明度轉換

.active { 
transform: translateY(0); 
opacity: 1; 
transition: all 1s ease; 
}

，另一個是

.previous { 
transform: translateY(100vh); 
opacity: 0; 
transition: all 1s ease; 
}

如果沒有他們在某一時刻出現沒有任何延遲過渡。但是當我添加轉換時，他們開始眨眼，因爲不透明。我怎樣才能讓塊先改造，然後失去它的不透明度

來源

2017-09-19 Kirill

使用visibility屬性，而不是不透明度 –

可以土特產品向我們展示一個更完整的例子，用html –

你在哪裏使用'transition'？請編輯你的問題並提供[mcve]。 – Xufox

你可以簡單地定義multiple transitions：

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: orange; 
 
    opacity: 0.5; 
 
    transition: transform 0.5s ease 0s, opacity 0.5s ease 0.5s; 
 
} 
 

 
body:hover div { 
 
    transform: rotate(45deg); 
 
    opacity: 1; 
 
}

<div></div>

來源

2017-09-19 18:37:04 Nit

如何在變換後製作不透明度轉換

回答

相關問題