animationFillMode: перезаписывает перезаписываемый эффект при наведении - PullRequest
Новая
       6

animationFillMode: перезаписывает перезаписываемый эффект при наведении

0 голосов
/ 31 мая 2019

У меня элемент div вылетает в виде, остается там и может вылететь позже на основе взаимодействия с пользователем. Нет проблем с анимацией forwardFillMode, но у нее также есть эффект: hover. Перед запуском анимации зависание работает (за кадром, но работает), но после полета теряет эффект наведения. Я частично исправил это, поставив! Важный после изменения эффекта наведения, но осталась одна проблема ... Длительность перехода все еще отсутствует ... она просто появляется там, где она должна плавно зависать. 

.folder-inside{

        width: 263px;
        height: 165px;
        position: absolute;
        background: #fff;
        top: -300px;
        left: 300px;
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
        border: 1px solid #ddd;
        animation-duration: 1s;
        -webkit-transition: all 200ms ease !important; /* these importants don't do anything*/
        transition: all 200ms ease !important;

}

.folder:hover .folder-inside{

    -webkit-transform: rotate(-7deg) translateY(-15%) !important; /* thanks to these importants there is a visible change but it's instant*/
    transform: rotate(-7deg) translateY(-15%) !important;
}

@keyframes flyIn {

    from{
        top: -300px;
        left: 300px;
        transform: rotate(30deg);
    }
    to {
        top: 0px;
        left: 10px;
        transform: rotate(-3deg);
    }
}

@keyframes flyOut {

    from {
        top: 0px;
        left: 10px;
        transform: rotate(-3deg);
    }
    to {
        top: -300px;
        left: 300px;
        transform: rotate(30deg);
    }
}
...