时间戳

首页 > 解决方案 > 为什么使用 display none 和 transition-delay 显示内容不起作用？

javascript - 为什么使用 display none 和 transition-delay 显示内容不起作用？

问题描述

我正在尝试制作一个动画，当我“ hover”一个元素时，会显示一个内容。此内容最初是隐藏的。

因此，只有在动画完成时才必须显示内容，但它不起作用。

查看我的代码：

div{    
  width: 50px;
  height: 50px;
  padding: 35px 26px;
  border-radius: 50%;
  color: #000;
  background: green;
  font-size: 20px;
  transition: 0.4s linear;
}

.content{
  display: none;
  font-weight: initial;    
  transition-delay: 2s  /* not working */
}

.number .content{
  background: #1A1D56;
}

div:hover{
  border-radius: 0;
  width: 250px;  
  height: 80px;
}

div:hover .content{
  display: initial;
  opacity: 1;  
  transition-delay: 2s  /* not working */
}
<div class="group1">
  <span class="number n1">
        016
    <span class="content">
      bla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla bla
    </span>
  </span>
</div>

<div class="group2">
  <span class="number n2">
        201
    <span class="content">
      bla bla bla bla bla bla bla bla bla bla bla
    </span>
  </span>
</div>

但是您可以看到，当绿色圆圈“悬停”时，文本 ( content) 会立即加载，这会导致视觉上的疏离。此外，当文本很大时，它会开始从绿色区域加载。

所以我想在加载它时添加一个延迟。

我在 stackoverflow 上读到无法使用transition-delay+ display: none。

那么，我能做些什么来解决这个问题呢？如何使文本仅在悬停完成时出现

标签： javascripthtmlcss

解决方案

您是否尝试使内容的不透明度为 0，然后在悬停时使其不透明度为 1？

推荐阅读