淡出之前：目標之後：目標已更改

Question

我有一個div，我希望可以看到：使用css的目標。到目前爲止，這工作得很好。我的問題是：我希望它淡入淡出。

我的代碼：

<div id="stuff"> 
Content 
</div> 

#stuff { 
    opacity:0; 
    transition: opacity .5s ease-in-out; 
} 

#stuff:target { 
    opacity:1; 
} 

所以我們說下面的網址應該淡入（做什麼）：

example.com/example.htm#stuff

但是，當我將url更改爲以下（或其他任何內容）時，它只是在沒有轉換的情況下變爲隱形：

example.com/example.htm#

注意，我想通過點擊一個鏈接，而不是通過JavaScript對矯正就可以改變其URL。

我的問題是：

是否有可能有改變目標爲先前的目標，而不使用JavaScript時的過渡？你會如何實現它？

如果可能，我不想使用任何JavaScript。

Answer 1

我剛剛更改了opacity屬性的值，它正在工作。據我所知，opacity只接受0和1之間的一個十進制數（除了inherit，initial和unset）。

#stuff { 
 
    opacity:0; 
 
    transition: opacity .5s ease-in-out; 
 
} 
 

 
#stuff:target { 
 
    opacity:1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="stuff"> 
 
Content 
 
</div> 
 
<a href="#stuff">Add hash</a> 
 
<a href="#">Remove hash</a>