Question

所以我在使用Animate.css库这里是链接，如果你不知道我在谈论https://github.com/daneden/animate.css

所以我想要这个：import turtle window = turtle.Screen() # Starting parameters MAX_X = 50 MAX_Y = 50 initial_angle = 5 speed = 10 # Create a turtle and name it Bob. Bob = turtle.Turtle() window.reset() window.setworldcoordinates(-MAX_X,-MAX_Y,MAX_X,MAX_Y) Bob.left(initial_angle) #Bob.fd(51) No need for this Bob.speed(speed) while True: xBob = Bob.xcor() yBob = Bob.ycor() print(xBob,yBob) if abs(xBob) >= MAX_X: # Use abs() to capture both walls heading = Bob.heading() Bob.setheading(180 - heading) if abs(yBob) >= MAX_Y: heading = Bob.heading() Bob.setheading(-heading) Bob.fd(1) window.exitonclick()当我点击它时成为这个：<h1><a id="Header" class="Header">My First Heading</a></h1>

现在它正在使用chrome和firefox，但动画没有发生。换句话说，我让它改变但是没有发生震动。

HTML：

<h1><a id="Header" class="Header animated shake">My First Heading</a></h1>

CSS

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

JQuery的

   #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;
  }

}）;

我是jsfiddle的新手，所以事情可能无法正确设置。这是我的jsfiddle demo https://jsfiddle.net/Demonwing103/7sc7zagq/21/

所以我最终还是不知道为什么即使改变它也不会动摇：$(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); }); });

Answer 1

很难说，因为您正在使用未包含在您小提琴中的第三方库。你应该改变你的类和id名称，以小写字母开头，这是更好的做法。这应该有效（使用小写类）：

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

Answer 2

因此，您的演示中存在两个错误：

其中一个，您链接到animate.min.css似乎链接here到404.我相信您只需键入@Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { log.debug("CORSFilter.doFilter() --"); HttpServletResponse response = (HttpServletResponse) servletResponse; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "GET,POST,DELETE,PUT,OPTIONS"); response.setHeader("Access-Control-Max-Age", "180"); response.setHeader("Content-Type", "application/json"); response.setHeader("Access-Control-Allow-Headers", "User-Agent,Referer,Origin,Host,Connection,Access-Control-Request-Method,Access-Control-Request-Headers,Cache-Control,Origin,X-Requested-With,Content-Type,Accept,Accept-Encoding,Accept-Language"); filterChain.doFilter(servletRequest, servletResponse); }，但您需要将其硬链接到实际文件即这one。您可以通过将链接直接复制并粘贴到jsFiddle的输入中来完成此操作。

其次，你仍然会看到动画不起作用。这是因为幕后shake uses transform CSS properties are only applicable to block level elements。您正尝试将其应用于内联元素animate.min.css，因此您只需将其设置为<h1>。

这是forked working demo of your jsFiddle。仅供参考我不想改变您现有的代码，如果我不需要，但是在您看到动画之前您必须稍等一下，因为您有一个很高的延迟设置。

还有堆叠片段

＆＃13;

display: block

＆＃13;

$(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);
		 });
	 });
 });

＆＃13;

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;
}

＆＃13;

Animate.css摇不动

2 个答案: