如何为“显示：无”向“显示：阻止”添加过渡效果？

Question

我使用了一些看起来像bubbels的div（每个单词都仇敌）：

<div class="choose">
  <div>
    bubble
    <img (click) = "delete_bubble($event)" id = "deletebutton" src = "delete.png">
  </div>
</div>

当我将气泡悬停时，右侧将出现一个x（关闭图标），单击该气泡将被删除。关闭图标会以以下方法显示在CSS中：

.choose div img{
  display: none;
  transition: opacity 1s ease-out;
  opacity: 0;
}

.choose div:hover img {
  display: inline-block;
  opacity: 1;
}

我不知道为什么不应用过渡效果，我想使从display：block到display：inline-block的过渡更加平滑，但是我不起诉如何...

我会感激任何想法！

谢谢！