在 AngularJS 中,如何淡入以下示例中的标题?这个想法是在页面加载后标题可用时淡入标题。
HTML
<section class="headline">
<span class="headlineFade" ng-show="screen.headline">
{{ screen.headline }}
</span>
</section>
SCSS
section.headline
{
// transition type
.headlineFade
{
-webkit-transition: opacity 3s linear;
-moz-transition: opacity 3s linear;
-o-transition: opacity 3s linear;
-ms-transition: opacity 3s linear;
transition: opacity 3s linear;
}
// start-value for transition
.headlineFade.fade-show
{
opacity: 0; // 0 = fully transparent
}
// end-value for transition
.headlineFade.fade-show-active
{
opacity: 1; // 1 = fully opaque
}
}
目前,上面的css似乎没有做任何事情。我希望一旦 screen.headline 可用,它就会应用转换。但事实并非如此。它只显示 screen.headline
,根本没有任何转换。
最佳答案
你能添加一个plunkr吗?
您是否包含了ng-animate
?
您是否使用 .ng-hide
类?您需要设置 display: block !important;
和一些小东西才能让它运行。
关于javascript - 页面加载后淡入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20440113/