Divの要素をスライドさせる方法

Question

私はJSとCSSをより良くしようとしているので、私は偽のiPhoneを作成しています。テキストバブルがオン/オフするときの様子をシミュレートしようとしています。画面。 Thisが、それはこれまでのように見えるものであり、これは、携帯電話自体のHTMLです：

<div id="iPhone"> 
    <div id="screen"></div> 
    <div id="me" class="bubble"></div> 
    <div id="homeButton" class="circle"></div> 
</div> 

としてだけでなく、スタイルシート：今

#iPhone { 
    position: fixed; 
    width: 250px; 
    height: 500px; 
    background-color: black; 
    border-radius: 25px; 
    top: 50%; 
    right: 30%; 
    transform: translate(-50%, -50%); 
    -webkit-filter: blur(3px); 
    box-shadow: 0 0 40px 20px white; 
    border: solid 2px white; 
} 

#me { 
background-color: #1D62F0; 
margin-top: 130%; 
margin-left: 25%; 


} 

#me::after{ 
    content: ""; 
    position: absolute; 
    right: 0em; 
    bottom: 0; 
    width: 0.5em; 
    height: 1em; 
    border-left: 0.5em solid #1D62F0; 
    border-bottom-left-radius: 1em 0.5em; 
} 

#screen { 
position: fixed; 
    width: 241px; 
    height: 370px; 
    background-color: white; 
    border-radius: 0px; 
    top: 8%; 
    left: 1%; 
    -webkit-filter: blur(3px); 
    border: solid 2px black; 

} 

、それを律するJSはありません。実際のテキストメッセージのように、それを自然に「画面」divにスライドさせて上から消えるようにするにはどうすればよいですか？

ありがとうございます！

Answer 1

overflow: hiddenプロパティをメッセージコンテナdivに配置し、新しいメッセージボックスを既存のメッセージボックスの下にプッシュするだけで、最終的には消えるようにする必要があります。