CSS轉換淡入

所以我以前使用CSS轉換，但我有這個唯一的例子。我正在編寫一個用於創建模態的自定義插件。本質上，我創建了一個動態document.createElement('div') div並將其附加到幾個類的身體。這些類定義顏色和不透明度。我想嚴格使用CSS來淡入這個div，但使狀態更改看起來很困難，因此它們需要一些用戶交互。CSS轉換淡入

嘗試了一些高級選擇希望它能區分的狀態變化，試圖媒體查詢希望改變狀態......尋找任何意見和建議，我真的想保持這種在CSS如果可能的話

來源

2012-07-26 afreeland

不知道我理解這個問題是正確的。你在尋找一種解決方案，不需要用戶交互的div來淡入？ – 2012-07-26 07:01:39

是的，這是正確的...我將以編程方式創建一個div，並希望它淡入是CSS – afreeland 2012-07-27 02:31:00

我相信你可以將元素添加到元素。但無論哪種方式，你不得不使用jQuery或REG JS

div { 
    opacity:0; 
    transition:opacity 1s linear;* 
} 
div.SomeClass { 
    opacity:1; 
}

來源

2012-07-26 00:33:51

OK，首先我不知道，當你創建一個使用(document.createElement('div'))一個div它是如何工作的，所以現在我可能是錯的，但止跌是否有可能使用：目標僞類選擇器呢？

如果你看一下下面的代碼，你可以SE我使用一個鏈接到目標的div，但在你的情況有可能瞄準從腳本，而不是#NEW和這樣做的div在沒有用戶交互的情況下淡入，還是我想錯了？

下面是我的示例代碼：

HTML

<a href="#new">Click</a> 
<div id="new"> 
    Fade in ... 
</div>

CSS

#new { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #000000; 
    opacity: 0;  
} 


#new:target { 
    -webkit-transition: opacity 2.0s ease-in; 
     -moz-transition: opacity 2.0s ease-in; 
     -o-transition: opacity 2.0s ease-in; 
            opacity: 1; 
}

...這是一個jsFiddle

來源

2012-07-27 06:49:03

欣賞幫助，試圖通過各種技術手動解決這個問題，似乎沒有任何工作。冉過這篇文章http://stackoverflow.com/questions/8101854/activate-an-elements-active-css-pseudo-class-using-javascript，它似乎他們放棄以及=（ – afreeland 2012-07-27 17:57:50

好吧，我會得到 – 2012-07-28 08:42:01

CSS關鍵幀的支持是相當不錯的，這些天：

.fade-in { 
 
\t opacity: 1; 
 
\t animation-name: fadeInOpacity; 
 
\t animation-iteration-count: 1; 
 
\t animation-timing-function: ease-in; 
 
\t animation-duration: 2s; 
 
} 
 

 
@keyframes fadeInOpacity { 
 
\t 0% { 
 
\t \t opacity: 0; 
 
\t } 
 
\t 100% { 
 
\t \t opacity: 1; 
 
\t } 
 
}

<h1 class="fade-in">Fade Me Down Scotty</h1>

來源

2016-09-23 21:38:04 DigitalDesignDj

如果您不是以編程方式添加元素，您仍然希望使用JS來添加此類，因爲您可能希望等待document.ready，而純CSS將不會做。 – DigitalDesignDj 2016-09-23 21:41:56

CSS轉換淡入

回答

相關問題