html - CSS - 应用过渡

Question

我不是 CSS 的新手，但出于某种原因，到目前为止我还没有玩过动画或过渡。我想学习如何将任何形式的过渡应用于我制作的工具提示，但每次我阅读代码然后尝试时，我似乎都失败了。我有一个我放在一起的快速代码示例，也许有人可以快速告诉我我做错了什么。

注意:这只是一个例子，我不打算使用 2 秒的过渡，明确表示它正在工作。

以下是关键代码，请看jsfiddle here .

label[data-tooltip] {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
    padding-bottom: 2px;
    position: relative;
    cursor: pointer;

    &:hover:after {
        transition: all 2s ease-in-out;
        .borderRadius(3px);
        content: attr(data-tooltip);
        background: rgba(83, 83, 83, 0.95);
        text-transform: none;
        position: absolute;
        line-height: 18px;
        padding: 5px 10px;
        font-size: 13px;
        width: 100px;
        z-index: 99;
        color: #fff;
        bottom: 120%;
        left: -5px;
    }

    &:after {
        display: none;
    }

    &:hover:after {
        display: block;
    }
}

Answer 1

试试这个 solution

您应该将所有样式分配给之后 悬停状态只是您想要设置动画的属性

label[data-tooltip] {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
    padding-bottom: 2px;
    position: relative;
    cursor: pointer;

    &:after {
        transition: all ease  5s;
        content: attr(data-tooltip);
        background: rgba(83, 83, 83, 0.95);
        text-transform: none;
        position: absolute;
        line-height: 18px;
        padding: 5px 10px;
        font-size: 13px;
        width: 100px;
        z-index: 99;
        color: #fff;
        bottom: 120%;
        left: -5px;   
        opacity: 0;
    }

    &:hover:after {
        opacity: 1;

    }
}

.formRow {
    background: #EFEFEF;
    margin: 50px auto;
    padding: 10px;
    width: 50%;
}
.formRow-label {
    display: inline-block;
    margin-right: 20px;
}
.formRow-input {
    display: inline-block;
}