как использовать CSS переход, чтобы показать быстро и скрыть медленно - PullRequest
1 голос
/ 09 апреля 2019

У меня есть диапазон, который установлен на opacity : 0, и я показываю его, когда пользователь наводит на него курсор, но дело в том, что я хочу показать его быстро и снова скрыть медленно.

.mySpan {
    opacity: 0;
    font-size: 12px;
    background: red;
    border-radius: 5px;
    color:#fff;
    transition: opacity cubic-bezier(0, 0.52, 1, 1) 0.3s
}

.mySpan:hover{
    opacity: 1
}

Ответы [ 2 ]

4 голосов
/ 09 апреля 2019

Переопределить длительность перехода при наведении:

.mySpan {
    opacity: 0.1;
    font-size: 12px;
    background: red;
    border-radius: 5px;
    color:#fff;
    transition: opacity cubic-bezier(0, 0.52, 1, 1) 1s;
}

.mySpan:hover{
    opacity: 1;
    transition-duration: 200ms;
}
<span class="mySpan">Hello</span>

При наведении курсора он отображается быстро, длительность которого составляет 200ms, но при прекращении зависания возвращается к 1s и медленно скрывается.

2 голосов
/ 09 апреля 2019

Вы можете добавить другое значение transition на hover:

.mySpan {
    opacity: 0;
    font-size: 12px;
    background: red;
    border-radius: 5px;
    color:#fff;
    transition: 1s;
    padding:10px;
}

.mySpan:hover{
    opacity: 1;
    transition:0s;
}
<span class="mySpan">test</span>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...