过渡动画在角度中不起作用

Transition animation does not work in Angular

本文关键字：不起作用 动画      更新时间：2023-09-26

您能否看一下代码片段，让我知道为什么动画不起作用，例如没有不透明度变化和背景颜色变化。请注意，代码完全取自一本书，所以我真的很困惑它如何无法工作。

请不要说css文件，angular-animate包含在html中

 <link rel="stylesheet" href="css/simple.css"/>
  <script src="lib/angular/angular-animate.js"></script>

html 的正文：

<body>
    <div ng-init="isShown=true">
        <input type="checkbox" ng-model="isShown" />Show
        <div ng-class="my-animation-class" ng-if="isShown">
        <h3>Enter/Leave Animation</h3>
        </div>
    </div>
</body>

CSS代码：

  .my-animation-class.ng-enter {
  -webkit-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  opacity: 0;
  background: green;
  }
  .my-animation-class.ng-enter.ng-enter-active {
  opacity: 1;
  }

另请注意，ngAnimate 在应用程序中作为依赖项存在.js

请帮忙！事先谢谢你！如果有任何问题，请告诉我。

你的问题是你正在使用ng-class并将my-animation-class作为范围变量传递，要解决这个问题，你应该使用

 <div ng-class="'my-animation-class'" ng-if="isShown">

甚至

 <div class="my-animation-class" ng-if="isShown">

这样，您的div 将具有类并且动画将运行。

希望它能解决您的问题。

相关文章：