Как создать эффект слайда с Angular?

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;
}

А вот и скрипка

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

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

Answer 1

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

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

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

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

.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-in-group на абсолютное. Я сделал это, чтобы предотвратить раздражающее мерцание во время перехода.

Answer 2

Я бы посоветовал использовать преобразования CSS3, а не использовать "левый". Я также обновил угловую версию.

Вот скрипка:

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);
}