如何使div在过渡时消失？

Question

我正在创建一个简单的待办事项应用程序，我希望我的div会在用户提交自己的待办事项时预先显示一些消息，并在过渡时消失。

我可以通过添加新类来进行过渡并使div消失：

.todo-hint-close{
  transform: translateY(500px);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}

但这只是使其不可见，仍然在我的页面中占有一席之地。每当用户提交任何内容时，新项都会出现在div之后，并且看起来很丑。取而代之的是，我想使用display:none，但是我不能使用转换。关于如何解决这个问题有什么建议吗？

很抱歉给您带来的不便是我现在所拥有的：https://codepen.io/eminaydin/pen/vYNKGoz

Answer 1

https://codepen.io/casa90/pen/LYpZZjJ

我建议您使用animation.css进行动画制作。有几种动画类型。https://daneden.github.io/animate.css/使用方便。只需添加和删除要使用的类

当您单击“提交时，使之消失”

 $('#yourElement').removeClass().addClass('animated bounceOutLeft');

提交完成后在您制作Appair时

 $('#yourElement').removeClass().addClass('animated bounceInLeft');

$('#doit').click(function(){
   
    $('#yourElement').removeClass().addClass('animated bounceOutLeft');
});

$('#pulse').click(function(){
     $('#yourElement').removeClass().addClass('animated bounceInLeft');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/daneden/animate.css/master/animate.min.css" rel="stylesheet"/>
<div id="yourElement">Hello, world!</div>
<br />
<button id="doit">do it</button>
<button id="pulse">pulse</button>

Answer 2

您可以在hover上这样使用：

img {
  height: auto;
  max-width: 100%;
}

.box {
  position: relative;
  display: block;
  width: 400px;
  height: 200px;
  background: #ccc;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: teal;
  z-index: 9999;
  transition: all 0.5s ease-in-out;
  opacity: 0;
}

.box:hover .overlay {
  opacity: 1;
  color: red;
  font-size: 2em;
}

<div class="box">
  <div class="overlay">
    Content in the div.
  </div>
</div>