Простой AngularJS с CSS-анимацией

Я прочитал несколько обучающих онлайн, но я не могу показать, что пример совместной работы с несколькими браузерами.Простой AngularJS с CSS-анимацией

HTML:

<div ng-include="show ? 'views/registration/form_activation.html' : null" ng-animate class="drop-down"></div>

CSS:

/* ANIMATIONS */ 

.drop-down { 
    -webkit-transition: all linear 1s; 
    -moz-transition: all linear 1s; 
    -ms-transition:  all linear 1s; 
    -o-transition:  all linear 1s; 
    transition:   all linear 1s; 

    line-height: 100%; 

} 

.drop-down.ng-enter, 
.drop-down.ng-leave-active { 
    opacity: 0; 
    max-height: 0px; 
} 

.drop-down.ng-enter-active, 
.drop-down.ng-leave { 
    opacity: 1; 
    max-height: 100%; 
}

То, что я хотел бы достичь в том, что, когда шаблон загружается с нг-включают в себя, она выцветает от 0 до 100 непрозрачности, и что он одновременно открывается, как выпадающий список (начиная с 0, до полной высоты, в которой он нуждается). И наоборот, когда форма скрывается.

Прозрачность уже работает, но изменение высоты не происходит, div сразу появляется с полной высотой. Может ли кто-нибудь помочь мне построить CSS с помощью кросс-браузерного решения?

источник

2014-09-15 tomazahlin

высота использования в пикселях ... –

я не могу использовать пиксели, потому что я не знаю, сколько высоты элементы будут иметь. Я также пробовал линию высотой от 0 до 100%, но, похоже, она не работает. – tomazahlin

дать ng-animate снимок http://www.nganimate.org/ – fauverism

Вы должны определить max-height в px в .drop-down классе, чтобы заставить его работать.
вы можете поместить любое большое значение в max-height в px, поскольку вы в любом случае не определяете высоту.

также определяют overflow: hidden в .drop-down, чтобы содержимое было скрыто при переходе высоты.

работал для меня.
пример демо здесь: - http://plnkr.co/edit/rXQQHTogKzAG91xw3JUx?p=preview

источник

2014-09-15 13:46:47

Простой AngularJS с CSS-анимацией

ответ

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