Элемент затухания после загрузки страницы

В 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 без какого-либо перехода вообще.

источник

2013-12-07 Ben

Вы рассматривали анимацию CSS? Они воспроизводятся, когда элемент отображается, и вам не нужен JS. – Mouagip

Проверьте документацию для ng-animate (http://docs.angularjs.org/api/ngAnimate). С 1.2 это то, что вы хотите использовать, так как оно также запускается на ng-show. – kontur

Можете ли вы добавить plunkr?

Включенная Стоимость пересылки ng-animate? Вы используете классы .ng-hide? Вам нужно установить display: block !important; и некоторые мелочи, чтобы добиться этого.

См. ng-hide documentation.

источник

2013-12-07 11:22:18

Элемент затухания после загрузки страницы

ответ

Смежные вопросы