クリック時のdivのCSSトランジション

Question

divを上から表示して、下に移動しようとしています。 CSSのトランジションを使用して同様の効果を得ました。しかし、ボタンをクリックするとdiv遷移が起こりたい。私はreactjsでこれをコーディングしています。

私はときに私私はbutton.Onlyをクリックしたときに私のdivが表示されます

.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 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のようなものを行っています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, 
     }); 

    } 

Answer 1

で私の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>

（私は今、それは <div id="notification" className="notification_div">ですので、div要素にIDを追加するつもりです）

注：HTMLではclassからclassNameに変更する必要があります。しかし、それは一般的にあなたが探しているものでなければなりません。