gpt4 book ai didi

javascript - 过渡动画在 Angular 中不起作用

转载 作者:行者123 更新时间:2023-11-28 06:30:43 25 4
gpt4 key购买 nike

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

请注意 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 作为依赖项存在于 app.js 中

求助!预先谢谢你!如果有任何问题,请告诉我。

最佳答案

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

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

甚至

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

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

希望它能解决您的问题。

关于javascript - 过渡动画在 Angular 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34990002/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com