javascript - 页面加载后淡入元素

Question

在 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 ，根本没有任何转换。

Answer 1

你能添加一个plunkr吗？

您是否包含了ng-animate？您是否使用 .ng-hide 类？您需要设置 display: block !important; 和一些小东西才能让它运行。

参见ng-hide documentation .