页面加载后的淡入元素

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。