Как создать эффект слайда с угловым?

Question

У меня есть следующий HTML:

<div> 
    <div data-ng-click="showContent()" data-ng-show="!visible" class="fly-in-group">{{heading}}</div> 

    <div data-ng-show="visible" class="fly-in-group"> 
     <div data-ng-click="showHeadings()">Terug naar jaaroverzicht</div> 
     <div data-ng-transclude></div> 
    </div> 
</div> 

и CSS:

.fly-in-group{ 
    -webkit-transition:all 2s linear 0s; 
    transition:all 2s linear 0s; 

    position: relative; 
    left: 0; 
    line-height:15px; 
    opacity:1; 
    padding:10px; 
} 

.fly-in-group.ng-hide-add, 
.fly-in-group.ng-hide-remove{ 

    display: block !important; 
} 

.fly-in-group.ng-hide-add{ 
    position: relative; 
    right: -9999px; 
} 

.fly-in-group.ng-hide-remove{ 
    position: relative; 
    left: -9999px; 
} 

А вот Fiddle

То, что я пытаюсь добиться в том, что, когда 'Некоторые надписи' нажата, это div «скользит» слева и что другой div (с элементами) «скользит вправо» справа.

Я хочу выполнить это, используя Angular + CSS3, но я просто не могу понять это. Может ли кто-нибудь помочь мне и объяснить, как это работает?

Answer 1

Переходы CSS3 зависят от изменения определенных атрибутов.

Когда элемент скрыт с помощью ngHide, к элементу добавляется класс 'ng-hide'. Таким образом, если мы хотим, чтобы вещи скользят внутрь и наружу, нам нужно перезаписать .ng-hide, чтобы он менял интересующий нас атрибут. Критической точкой является то, что нам также необходимо переопределить значение .ng-hide по умолчанию display: none, что в противном случае разрушает переход.

В этом случае не нужно настраивать промежуточные классы .ng-hide-add и .ng-hide-remove.

Чтобы решить вопрос с минимально необходимыми изменениями, изменить CSS для этого (fiddle here):

.fly-in-group{ 
    -webkit-transition:all 0.5s linear 0s; 
    transition:all 0.5s linear 0s; 

    position: absolute; 
    left: 0; 
    line-height:15px; 
    opacity:1; 
    padding:10px; 
} 

.fly-in-group.ng-hide { 
    display: block !important; 
    position: absolute; 
    left: -999px; 
} 

Моего один нюанс в том, что я .fly-в-группу положения изменился к абсолютному. Я сделал это, чтобы предотвратить раздражающее мерцание во время перехода.

Answer 2

Я бы посоветовал использовать css3 transforms и не использовать «left». Я также обновил угловую версию.

Вот скрипку:

http://jsfiddle.net/fernandopasik/GcUjL/

.fly-in-group { 
    -webkit-transition:all 0.2s linear 0s; 
    -moz-transition:all 0.2s linear 0s; 
    -o-transition:all 0.2s linear 0s; 
    -ms-transition:all 0.2s linear 0s; 
    transition:all 0.2s linear 0s; 
    position: absolute; 
    left: 0; 
    cursor: pointer; 
    line-height:15px; 
    opacity:1; 
    padding:10px; 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
} 
.fly-in-group.ng-hide { 
    display: block !important; 
    -webkit-transform: translate3d(-100%, 0, 0); 
    -moz-transform: translate3d(-100%, 0, 0); 
    -o-transform: translate3d(-100%, 0, 0); 
    -ms-transform: translate3d(-100%, 0, 0); 
    transform: translate3d(-100%, 0, 0); 
}