角度动画不起作用答案

【问题标题】：angular animation not working角度动画不起作用
【发布时间】：2016-02-28 14:36:22
【问题描述】：

我是新 AngularJS。我无法将动画应用到我的文本和按钮。我在控制台中没有收到任何错误。我不知道哪里出了问题。我想要为我的文本和按钮添加不同的动画。我在 html 中提供了 css 动画链接。这是我的html页面。请帮助我知道我是否以正确的方式应用动画。

<!doctype html>
<html ng-app="MyApp" >
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bounceOut.css">
<link rel="stylesheet" href="zoomIn.css">
</head>
<body ng-controller="MyCtrl">
<h3 class="bounceOut">I am</h3> </div>
<button type="submit" class="OptionButton zoomIn">
Submit
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
<script> 
var app = angular.module("MyApp", ["ngAnimate"]);
  app.controller('MyCtrl', function($scope) {
  });
</script>
</body>
</html>

这是我的bounceOut动画css代码

@keyframes bounceOut {
  20% {
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
}
.bounceOut {
  animation-name: bounceOut;
}

这是我的 zoomIn 动画 css 代码

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}
.zoomIn {
  animation-name: zoomIn;
}

【问题讨论】：

标签： angularjs css animation

【解决方案1】：

似乎您使用的是 css3 动画而不是 angularjs 动画。如果我理解错了，请告诉我，但这应该可行，

/* Styles go here */

.zoomIn {
  animation: zoomInf 5s infinite;
  -webkit-animation: zoomInf 5s infinite;
}

@keyframes zoomInf {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}

@-webkit-keyframes zoomInf {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
    -webkit-transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}


@keyframes bounceOutf {
  20% {
    transform: scale3d(.9, .9, .9);
  }
  50%,
  55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
}


@-webkit-keyframes  bounceOutf {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
  }
  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
  }
}


.bounceOut {
  animation: bounceOutf 5s infinite;
  -webkit-animation: bounceOutf 5s infinite;
}

【讨论】：

它工作正常，但我想要为我的文本设置bounceInLeft动画。请你帮我看看这个动画。
参考这个plnkr 演示这个
我尝试了代码，它工作正常。我将它更改为bounceInRight 因为我想要bounceInRight 动画。但唯一的问题是它会弹回起始位置。我希望它停在中间。
@keyframesbounceInRightfs { 0% { 不透明度：0.;变换：比例（0.9，0.9）； } 到 { 不透明度：1;变换：比例（0.7，0.7）； } } .bounceInRight { 右：400px;动画：bounceInRightfs 3s； -webkit-动画：bounceInRightfs 3s； -moz 动画：bounceInRightfs 3s ； }
它实际上来到了中心@-webkit-keyframes bounceInRightfs { 0% { opacity: 0.; -webkit-transform: scale(1, 1); } to { opacity: 1; -webkit-transform: scale(0.5, 1); } } .bounceInRight { width:500px; border: 1px; border-bottom-style: solid; animation: bounceInRightfs 3s infinite; -webkit-animation: bounceInRightfs 3s infinite; -moz-animation: bounceInRightfs 3s infinite; }