爲什麼我的：課前過渡呢？聚合物

我有導致陰影變得可見的代碼，但它不響應出現/消失的任何形式的轉換。爲什麼我的：課前過渡呢？聚合物

任何人都可以幫忙嗎？

CSS的實際應用

.wrapper { 
     position: relative; 
     z-index: 0; 
     display: inline-block; 
     width: 100%; 
     transition: all 2s; 
    } 

    .wrapper.shadow:before { 
     position: absolute; 
     z-index: 1; 
     top: 0; 
     width: 100%; 
     height: 10px; 
     box-shadow: inset 0px 10px 6px -3px rgba(252, 29, 0, 1); 
     pointer-events: none; 
     content: ""; 
     opacity: 1; 
     transition: all 2s; 
    }

請參閱我的擴展代碼here

編輯 updated fiddle with "inhert" being used

來源

2017-07-24 physicsboy

錯誤行1：'意外的標記（'（在Codepen演示） –

怎麼能沒有進行轉換的JS顯示.wrapper.shadow：正在切換上課前。 ..我已經嘗試過更多標準的CSS類，它與延遲工作，我只是認爲這是因爲：之前的標籤至於「意外的令牌」，我會忽略這一點。這是POLYMER – physicsboy

僞元素首先不存在，所以你沒有任何東西可以轉換。

用opacity或其他東西創建一個隱藏的默認狀態，然後當它被切換時它應該淡入視圖。

例

.wrapper { 
    position: relative; 
    z-index: 0; 
    display: inline-block; 
    width: 100%; 
    transition: all 2s; 
} 
.wrapper:before { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    width: 100%; 
    height: 10px; 
    box-shadow: inset 0px 10px 6px -3px rgba(252, 29, 0, 1); 
    content: ""; 
    opacity: 0; 
    transition: all 2s; 
} 

.wrapper.shadow:before { 
    pointer-events: none; 
    opacity: 1; 
}

來源

2017-07-24 12:50:18

關於如何做亞當的任何提示？目前我還沒有深入研究僞元素。 – physicsboy

@physicsboy - 有很多不同的方法。我已經在上面添加了一個示例。你基本上只需要僞元素存在，並轉換到可見狀態。 –

很棒！我一直在爲這個問題苦苦掙扎了一個多星期！我可以理解你的意思是在它可以使用之前需要存在，但不知道該怎麼做。頭號人物！ – physicsboy

爲S tated here，

你只需要利用經常被遺忘繼承值[..]我們（還）沒有直接針對僞元素與自定義動畫。

這意味着您需要將轉換：2s all;裏面一個.wrapper .shadow選擇器

來源

2017-07-24 12:44:15

這是怎麼完成的？ –

請問您能幫我解決一下這個問題嗎？我已經看到你的源代碼編輯的小提琴顯示他們使用「繼承」從父母獲得，但我要麼沒有正確使用它或它只是不工作。請參閱原始問題以獲取更新的CodePen。 – physicsboy

爲什麼我的：課前過渡呢？聚合物

回答

相關問題