angularjs приковано выцветание в/исчезать из перехода

Я посмотрел на официальный примере перехода показать/скрыть в нижней части этой страницы ... http://docs.angularjs.org/api/ng.directive:ngShow angularjs приковано выцветание в/исчезать из перехода

я попытался изменить его, чтобы получить аналоговый или цифровой переход к выцветанию (переход: непрозрачность 0,5 с облегчения) из одного div в другой, где оба divs занимают то же самое положение на странице, так что один div полностью исчезает до того, как другой div начинает исчезать.

В jquery это будет так же просто:

$("#divA").fadeOut(function() { $("divB").fadeIn(); });

Does у кого есть какие-либо рекомендации по наилучшему способу достижения этого с угловым, в отношении связанного примера, который использует одну «проверенную» модель для запуска перехода?

источник

2013-10-25 user2754486

I T hink мне нужно больше информации ... что вызовет эффект затухания? Можете ли вы привести пример, используя более пример кода? – tennisgent

Я мог бы, но я думаю, что могу описать его со ссылкой на пример в ссылке. В этом примере два анимационных divs с атрибутом class = "check-element animate-show", оба они одновременно ожидают (т.е. они оба видны во время анимации). Очень распространенный сценарий, который я использую в jquery, состоит в том, чтобы угаснуть/скрыть первый div, а после его скрытия, затем затухать/показать второй div в том же месте на странице. Другими словами, для чистоты некоторого содержимого и последующего постепенного уменьшения содержания - только один из разделов содержимого, видимых в любой момент времени. – user2754486

Вы использовали какой-либо из этих ответов? Если это так, вы должны принять выбранный ответ. – Tass

Вы можете использовать ng-animate в сочетании с ng-show (http://docs.angularjs.org/api/ngAnimate), который можно приобрести у Angular 1.1.4. Или же просто примените класс show, когда модель будет отмечена галочкой, и примените ваше шоу и анимацию к классу.

<label><input type="checkbox" ng-model="showElement" />Show div</label> 
<div ng-class="{show: showElement}"></div>

источник

2013-10-25 12:06:32 eddiec

Спасибо за ответ, но думаю, что вы пропустили точку.Проблема заключается не в том, как применять анимацию к показу, а в том, что две анимации (одна скрыть и одна шоу) запускаются с одного и того же элемента модели, и анимации нужно запускать последовательно, а не одновременно. Сначала анимация скрыть должна выполняться до завершения, а затем анимация шоу. Это возможно? – user2754486

А я вижу, я бы обратился к этому, установив ng-класс из функции, Ill обновить мой пример. – eddiec

Я использовал пример в ngShow сделать следующее jsfiddle на основе angular1.2.0-rc.3.

HTML-код:

<div ng-app="App"> 
    Click me: <input type="checkbox" ng-model="checked"><br/> 
    <div class="check-element animate-show" ng-show="checked"> 
     <span class="icon-thumbs-up"></span> I show up when your checkbox is checked. 
    </div> 
    <div class="check-element animate-show" ng-hide="checked"> 
     <span class="icon-thumbs-down"></span> I hide when your checkbox is checked. 
    </div> 
</div>

стили CSS

.animate-show.ng-hide-add, 
.animate-show.ng-hide-remove { 
    -webkit-transition:all linear 0.5s; 
    -moz-transition:all linear 0.5s; 
    -o-transition:all linear 0.5s; 
    transition:all linear 0.5s; 
    display:block!important; 
} 

.animate-show.ng-hide-add.ng-hide-add-active, 
.animate-show.ng-hide-remove { 
    line-height:0; 
    opacity:0; 
    padding:0 10px; 
} 

.animate-show.ng-hide-add, 
.animate-show.ng-hide-remove.ng-hide-remove-active { 
    line-height:20px; 
    opacity:1; 
    padding:10px; 
    border:1px solid black; 
    background:white; 
} 

.check-element { 
    padding:10px; 
    border:1px solid black; 
    background:white; 
}

И, наконец, код JavaScript, не забудьте включить библиотеки angular.js и angular-animate.js

angular.module('App', ['ngAnimate']);

I надеюсь, что это поможет вам;)

источник

2013-11-03 14:23:04 Adrian

@ user2754486 Выяснил ли этот ответ? – Adrian

Во-первых, спасибо за код. Во-вторых, при отражении определение пользовательских стилей CSS является именно тем, почему разработчики предпочитают функцию «fadeOut». Так что нам не нужно погружаться в CSS. Я понимаю, что многие против jQuery вместе с Angularjs, но чтобы избежать пользовательского стиля, кажется, это может быть необходимо. –

Используя ngAnimate module, вы можете сделать это в чистом CSS с -transition-delay директивы:

Plunker

HTML

<body ng-app="ngAnimate"> 
    Click me: <input type="checkbox" ng-model="checked"> 
    <br/> 
    <img ng-show="checked" src="img1.jpg"> 
    <img ng-hide="checked" src="img2.jpg"> 
</body>

CSS

img { 
    position: absolute; 
} 

.ng-hide-add-active { 
    display: block!important; 
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all; 
} 

.ng-hide-remove-active { 
    display: block!important; 
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all; 
    -webkit-transition-delay: 0.5s; 
    transition-delay: 0.5s; 
} 

.ng-hide { 
    opacity: 0; 
}

источник

2014-07-15 06:49:12 rphv

Просто блестящий! –

Требуется положение: если не указано иное. Может быть, не лучшее решение для сложных страниц. – Celestis

Просто использовал это для 2 разделов, занимающих одно и то же пространство - работает как шарм! – JBuus

angularjs приковано выцветание в/исчезать из перехода

ответ

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