Question

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

请注意，hss中不包含css文件，angular-animate

 <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在app.js

中是依赖项

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

Answer 1

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

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

甚至

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

这样，你的div将拥有该类，动画将会运行。

希望它能解决你的问题。

过渡动画在Angular中不起作用

1 个答案: