删除类时的不同过渡

Question

下面是我尝试过的代码。我需要的是当类在 5 秒后被删除时。通知框不应上移。只是在同一个地方淡出。

这可以通过在 setTimeout 中再添加一个类来完成。我希望避免这种情况。

$('.notify').click(function() {
$('.note').addClass('show');
setTimeout(function() {
$('.note').removeClass('show');
}, 5000);
})

.note {
top: 0%;
width: 300px;
position: fixed;
background: #ccc;
padding: 10px;
left: 50%;
height: 100px;
margin: -50px 0 0 -150px;
opacity: 0;
transition: top 1s, opacity 1.5s;
}
.show {
top: 50%;
opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="notify">click here</button>
<div class="note">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

Answer 1

在过渡中使用延迟：前 1 秒 1.5 秒，不透明度 1.5 秒;并添加过渡：前 1 秒，不透明度 1.5 秒;在.show类中

$('.notify').click(function() {
$('.note').addClass('show');
setTimeout(function() {
$('.note').removeClass('show');
}, 5000);
})

.note {
top: 0%;
width: 300px;
position: fixed;
background: #ccc;
padding: 10px;
left: 50%;
height: 100px;
margin: -50px 0 0 -150px;
opacity: 0;
transition: top 1s 1.5s, opacity 1.5s;
}
.show {
top: 50%;
opacity: 1;
transition: top 1s,opacity 1.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="notify">click here</button>
<div class="note">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

Answer 2

你也可以使用:target选择器和简单的animation来做纯CSS：

#note {
width: 300px;
position: fixed;
top: 0;
left: 50%;
background: #ccc;
padding: 10px;
height: 100px;
margin: -50px 0 0 -150px;
opacity: 0;
transition: all 1s;
}
#note:target {
top: 50%;
animation: fadeOut 6s forwards;
}
@keyframes fadeOut {
16.67%, 83.33% {opacity: 1}
100% {opacity: 0}
}

<a href="#note"><button class="notify">click here</button></a>
<div id="note">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

但唯一的限制是它只能运行一次。