删除课程

Question

下面是我试过的代码。我需要的是当课程在5s后被删除。通知框不应该向上移动。只是在同一个地方淡出。

这可以通过在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

在转换中使用延迟：前1s 1.5s，不透明度1.5s; 并在 .show中添加转换：top 1s，opacity 1.5s; 上课

$('.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 ：

＆＃13;

＆＃13;

#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}
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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