CSS
<style>
.top-bar {
display: flex;
flex-direction: row;
align-items: center;
height: 45px;
width: 375px;
background-color: black;
/* 关键 */
overflow: hidden;
transition: all .5s ease-out;
}
.delete {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%;
width: 30px;
cursor: pointer;
}
.delete img {
height: 10px;
width: 10px;
}
.logo {
height: 30px;
width: 30px;
margin-left:3px;
margin-right: 30px;
cursor: pointer;
}
span {
color: white;
font-size: 14px;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn {
width: 94px;
height: 100%;
line-height: 45px;
text-align: center;
font-size: 14px;
color: #fff;
background-color: #F63515;
}
</style>
HTML
<div class="top-bar">
<div class="delete">
<img src="./img/delete.png" alt="">
</div>
<img class="logo" src="./img/logo.png" alt="">
<span>打开京东App,购物更轻松</span>
<div class="btn">立即打开</div>
</div>
JS代码
<script>
// 1.获取元素
var topBar = document.querySelector(".top-bar") as HTMLDivElement
var deleteEl = topBar.querySelector(".delete")
// 2.监听delete的点击
deleteEl.onclick = function(){
topBar.remove()
// 第一种方式
// setTimeout(function(){
// topBar.remove()
// },300)
}
// 第二种方式
topBar.ontransitionend = function(){
topBar.remove()
}
</script>