按钮中的闪烁宽度动画

问题描述

我是 CSS 动画的初学者，遇到了问题。

这个问题是一个按钮动画，当鼠标悬停在按钮上时，他会无限闪烁。

我的css是

button {
        padding      : 0;
        width        : auto;
        border-radius: 0;
        background   : transparent;
        color        : $cinza;
        font-size    : 2.4rem;
        font-weight  : bold;
        transition   : color 0.2s linear,background-color 0.2s linear;

        &:hover {
          color           : $branco;
          background-color: $azul;
          padding: 0.5rem;
          padding-left: 0.5rem;
          border-radius   : 8px;

          span.titulo-botao {
            opacity: 1;
            width  : 150px;
          }
        }

        span.titulo-botao {
          display: none;
          opacity   : 0;
          width     : 0;
          transition: all 0.2s ease-out;
        }
      }

还有我的按钮：

<button title="Adicionar">
 <ion-icon ios="ios-add" md="md-add"></ion-icon>
  <span class="titulo-botao">Adicionar</span>
</button>

目标是在按钮悬停时，类“.titulo-botao”的文本出现而没有闪烁动画。

感谢关注。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）