动画:悬停:之后

Question

我有以下css规则:

button:hover:after {
    content: ' ' attr(title);
}

基本上该按钮具有作为内容和标题属性的fontawesome图标.当您将鼠标悬停在按钮上时,它会添加一个空格,然后将标题添加到按钮的内容中.看到这个JSFiddle

现在问题是,我将如何设置动画？我希望按钮的新宽度是动画的,所以它不会显示为静态和丑陋.

Answer 1

我找到了一个解决方案，它有效，但可能不是最好的时尚

button:after {
    content:' ' attr(title);
    visibility: hidden;
    opacity:0;
    transition: visibility 0s linear 0.5s, opacity 0.5s linear, font 0.05s linear;
    font-size: 0;
}
button:hover:after {
    content:' ' attr(title);
    visibility: visible;
    opacity:1;
    transition-delay:0s;
    font-size: 13px;
}

请参阅此处的工作 JSFiddle

背景

您的方法类似于使用显示属性。因此，积分将转到显示器上的 Transitions: 属性，:after我用我的小技巧将初始 状态下的字体大小减小到 0

更新

更平滑的过渡：

button:after {
    content: ' ' attr(title);
    font-size: 0;
    opacity: 0;
    transition: opacity 0.2s 0s ease, font-size 0.2s 0.2s ease;
}

button:hover:after {
    font-size: inherit;
    opacity: 1;
    transition: font-size 0.2s 0s ease, opacity 0.2s 0.2s ease;
}

参见JSFiddle