點擊div上的CSS轉換

我試圖顯示從頂部出現的div並向下流動。我已經使用CSS轉換獲得了類似的效果。但我希望當我點擊一個按鈕時發生div轉換。我在reactjs中編寫了這個代碼。點擊div上的CSS轉換

我做了這樣的事情

我的div

<div className="notification_div"> 

       <span className="small_font notification_header">Notifications</span> 

       <div className="notification_item_div"> 
        <span className="notification_item">Test Notification</span> 
       </div> 

       <div className="notification_item_div"> 
        <span className="notification_item">Test Notification</span> 
       </div> 

       <div className="notification_item_div"> 
        <span className="notification_item">Test Notification</span> 
       </div> 

</div>

CSS我已經申請當我當我點擊一個button.Only

.notification_div { 

    width: 100%; 
    height: 0; 
    background-color: whitesmoke; 
    margin-bottom: 20px; 
    border-radius: 5px; 

} 

.notification_div:active { 

    transition: height 1s; 
    height: 100%; 

}

我的DIV出現點擊div，過渡開始發生。我想在div第一次出現時發生轉換。

我該怎麼做？

這我如何展示我在reactjs

class App extends Component { 


    constructor(props) { 
     super(props); 

     this.state = { 
      showNotification: false, 
     }; 


      this.open_notification = this.open_notification.bind(this); 
    } 

    open_notification() { 

     this.setState({ 
      showNotification: !this.state.showNotification, 
     }); 

    }

來源

2017-03-02 CraZyDroiD

'.notification_div：active'意味着css只適用於在 –

上點擊該元素是的，我知道這一點。我想在我的div出現時進行轉換。未點擊。 – CraZyDroiD

你的CSS實際上是讓你的div流從頂部到底部？因爲改變高度不應該改變div的位置 –

DIV那麼不管你想要做什麼樣的影響，這將遵循以下邏輯。

一種方法是添加另一個類，當你點擊的功能，像這樣......（我要去一個ID添加到div所以現在<div id="notification" className="notification_div">）

function open_notification() 
 
{ 
 
// this.setState({ 
 
//  showNotification: !this.state.showNotification, 
 
// }); 
 
    document.getElementById("notification").className += " active"; 
 
}

.notification_div { 
 

 
    width: 100%; 
 
    height: 0; 
 
    background-color: whitesmoke; 
 
    margin-bottom: 20px; 
 
    border-radius: 5px; 
 

 
} 
 

 
.notification_div.active { 
 

 
    transition: height 1s; 
 
    height: 100%; 
 
    background-color: yellow; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
}

<div id="notification" class="notification_div"> 
 

 
       <span className="small_font notification_header">Notifications</span> 
 

 
       <div className="notification_item_div"> 
 
        <span className="notification_item">Test Notification</span> 
 
       </div> 
 

 
       <div className="notification_item_div"> 
 
        <span className="notification_item">Test Notification</span> 
 
       </div> 
 

 
       <div className="notification_item_div"> 
 
        <span className="notification_item">Test Notification</span> 
 
       </div> 
 

 
</div> 
 
    
 
<button type="button" onclick="open_notification()">Click Me</button>

注意：您需要在HTML中更改class至className，也許還有其他一些內容。但它通常應該是你正在尋找的。

來源

2017-03-02 04:12:59

點擊div上的CSS轉換

回答

相關問題