Почему animate.css работает только с элементами DIV
Я использую библиотеку animate.css в течение длительного времени, и она отлично работает, но сегодня я обнаружил, что она не работает с SPAN или любым другим элементом, кроме DIV. Кто-нибудь знает причину и как исправить?
Посмотрите действительно простой пример ниже (код ниже):
https://jsfiddle.net/214gdyrw/
Когда вы откроете ссылку выше, вы увидите, что AAA и CCC анимируются автоматически (при загрузке страницы), а bbb - нет. Единственная разница в том, что один - div, а другой - span. Как сделать так, чтобы span тоже был анимированным?
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<!-- Animate.css -->
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />
</head>
<body>
<div class = "animated bounce">AAA</div>
<span class = "animated bounce">bbb</span>
<div class = "animated bounce">CCC</div>
</body>
</html>
Ответы 1
Добавьте display: inline-block на span.
Это решит вашу проблему.
Элемент должен иметь блочное поведение, а не встроенный.
inline-block - это встроенный уровень, а не уровень блока.
Я не нашел нигде в документации по этому поводу, удивительно.
Встроенный блок @Alohci работал, я не знаю почему.
@Samul - Конечно, решение в порядке - это ошибочное объяснение.
@Alohci EFA ....
Это вариант отображения, используйте
display:blockилиdisplay:inline-blockв тегахspan/a- jsfiddle.net/andyjh07/1estv24a