CSS-Übergang für ein div auf klicken

Question

Ich versuche ein div erscheint von oben angezeigt und fließt nach unten. Ich habe einen ähnlichen Effekt mit CSS-Übergängen erreicht. Aber ich möchte, dass div Übergang passiert, wenn ich auf eine Schaltfläche klicke. Ich schreibe das in reactjs.

Ich habe so etwas wie dieses

getan meine 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 Ich habe angewendet

.notification_div { 

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

} 

.notification_div:active { 

    transition: height 1s; 
    height: 100%; 

} 

Mein div erscheint, wenn ich ein button.Only klicken, wenn i Klicken Sie auf das Div, der Übergang beginnt zu passieren. Ich möchte, dass der Übergang stattfindet, wenn das Div zuerst erscheint.

Wie kann ich das tun?

Dieses, wie ich in meinem reactjs div zeigen

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

Nun unabhängig davon, welche Wirkung Sie versuchen, geht es darum, die folgende Logik folgen.

Eine Möglichkeit ist, eine andere Klasse hinzuzufügen, wenn Sie die Funktion klicken, wie so ... (Ich bin eine ID zum div gehen hinzufügen, so ist es jetzt <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>

Hinweis: Sie müssen class zu className im HTML ändern und vielleicht einige andere Dinge. Aber es sollte generell das sein, wonach Sie suchen.