Живой.css shake не работает

Поэтому я использую Анимат.библиотека css вот ссылка, Если вы не знаете, о чем я говорю https://github.com/daneden/animate.css

Поэтому я хочу, чтобы это: <h1><a id="Header" class="Header">My First Heading</a></h1> стало этим, когда я нажму его: <h1><a id="Header" class="Header animated shake">My First Heading</a></h1>

Теперь он работает в chrome и firefox для меня, но анимация не происходит. другими словами, Я заставил его измениться, но тряски не происходит.

HTML: 

<body>
<h1><a id="Header" class="Header">My First Heading</a></h1> 
<p>My first paragraph.</p>
</div>
</body>

CSS 

   #Header{
  -webkit-animation-duration: 3s;
  -webkit-animation-delay: 2s;
  -moz-animation-duration: 3s;
  -moz-animation-delay: 2s;
  -o-animation-duration: 3s;
  -o-animation-delay: 2s;
  animation-duration: 3s ;
  animation-delay: 2s;
  }

JQuery 

$(function(){
 var animationName = 'animated shake';
 var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

 $('h1').on('click',function(){
     $('#Header').addClass(animationName).one(animationEnd,function(){
         $(this).removeClass(animationName);
     });
 });

});

Я новый к jsfiddle, чтобы все могло быть не так, как надо. вот моя демо-версия jsfiddle https://jsfiddle.net/Demonwing103/7sc7zagq/21/

Так что в конечном счете я не знаю, почему он не дрожит, хотя его изменение на это: <h1><a id="Header" class="Header animated shake">My First Heading</a></h1>

2 2
javascript html css jquery jsfiddle

2 ответа:

Итак, есть две вещи, которые неверны в вашей демо-версии:

Во-первых, ваша ссылка на анимацию.минута.css, кажется, связывает здесь, который идет к 404. Я считаю, что вы только что ввели animate.min.css, но вам нужно на самом деле жестко связать его с реальным файлом, т. е. этот один. Вы можете сделать это, скопировав и вставив ссылку прямо во входные данные в jsFiddle.

Во-вторых, вы все равно увидите, что анимация не работает. Это происходит потому, что за кулисами, shake использует преобразование CSS свойства , которыеприменимы только к элементам уровня блока . Вы пытаетесь применить его к встроенному элементу <h1>, поэтому вам просто нужно установить его в display: block.

Вотраздвоенная рабочая демонстрация вашего jsFiddle . Просто к вашему сведению, я не хотел изменять ваш существующий код, если мне это не нужно, но вам придется немного подождать, прежде чем вы увидите анимацию, так как у вас установлена высокая задержка.

Также стек фрагмент 

$(function(){
	 var animationName = 'animated shake';
	 var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
	 
	 $('h1').on('click',function(){
		 $('#Header').addClass(animationName).one(animationEnd,function(){
			 $(this).removeClass(animationName);
		 });
	 });
 });
body{
	background-color: rgb(171, 194, 232);
}
#Header{
    display: block;
	  -webkit-animation-duration: 10s;
		-webkit-animation-delay: 2s;
    -moz-animation-duration: 3s;
	  -moz-animation-delay: 2s;
    -o-animation-duration: 3s;
	  -o-animation-delay: 2s;
    animation-duration: 3s ;
		animation-delay: 2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/daneden/animate.css/master/animate.min.css" rel="stylesheet"/>
<body>
<h1><a id="Header" class="Header">My First Heading</a></h1>
<p>My first paragraph.</p>

<div id="animeContent">
</div>

</body>
0

Трудно сказать, так как вы используете стороннюю библиотеку, которая не входит в вашу скрипку. Вы должны изменить имена классов и идентификаторов, чтобы начать со строчных букв, хотя это лучше практиковать. Это должно работать (используются классы нижнего регистра): 

$('.header').click(function(){
     $(this).addClass('animated').addClass('shake');
 });
0