我是 Angular 的新手，我有一个带有动画的 CSS 样式表，我想在调用 View 时将其应用于 View 。我试着在线搜索，但我不明白这些信息。
我的 CSS:
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeft{
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
我的第一个 View (首先加载的 View ):
<body id="login">
<div>
<div id="container" class="container-fluid">
@RenderBody()
</div>
</div>
</body>
我的部分观点:
<div class="animated fadeInLeft">
<h1 class="large">Welcome.</h1>
</div>
当页面加载到有 renderbody() 的地方时，我的局部 View 就会出现。
我想在第一个 View 调用时在其上放置一个 fadeInLeft 动画。
我希望我的问题足够清楚，我对 Angular 真的很陌生，并且习惯于在常规 Html 上使用 CSS 动画。
最佳答案
我建议使用 ngAnimate module . 然后像这样写你的 CSS-
.animated .ng-enter {animation: fadeInLeft 1s both ease-in;}
关于html - 调用 View 时如何将CSS动画应用于 Angular View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36189897/