Как отобразить пользовательскую анимацию CSS с помощью jquery и вернуться к просто show (), если не поддерживается?

0

Сначала я хочу, чтобы элемент был скрытым и запускал анимацию css, используя jquery. Если браузер не поддерживает анимацию css, мне нужно, чтобы он вернулся к простому использованию $ (element).show().

Вот моя скрипка

http://jsfiddle.net/SSsVx/30/

<div id="submit-logged-out" class="popout">
    foo
</div>

#submit-logged-out {
background: #000;
color: #fff;
    width:80%;
}
    .popout {
        animation: popout 0.25s ease;
        -webkit-animation: popout 0.25s ease;
    }
    @keyframes popout {
        from{transform:scale(0)}
        80%{transform:scale(1.05)}
        to{transform:scale(1)}
    }
    @-webkit-keyframes popout {
        from{-webkit-transform:scale(0)}
        80%{-webkit-transform:scale(1.05)}
        to{-webkit-transform:scale(1)}
    }
Теги:

2 ответа

1
Лучший ответ

Просто обнаружите, что поддержка CSS поддерживается и отбрасывается, если нет:

if ('animation' in document.body.style) {
    //    Make sure you use all vendor prefixes
    console.log('We have animations')
} else {
    console.log('Fallback')
    $('#submit-logged-out').show()
}

Вот демонстрация: http://jsfiddle.net/SSsVx/32/

  • 0
    Спасибо, я отмечу это как правильное, но я действительно нашел более изящное решение самостоятельно.
  • 0
    Это правильный путь. В вашем примере "$ ('# SomeDiv'). AddClass ('MyAnimation'). Show ()", если анимация поддерживается (вероятность 80%), вы серьезно повредите браузеру, запустив JS и CSS в paralel.
Показать ещё 6 комментариев
0

Хорошо нашел хорошее решение

#SomeDiv{ .... }
.MyAnimation{ .... }

$('#SomeDiv').addClass('MyAnimation').show();
$('#SomeDiv').hide().removeClass('MyAnimation');

Таким образом, если анимация не поддерживается, она все еще скрывает или показывает

Ещё вопросы

Сообщество Overcoder
Наверх
Меню