Добавление слайд-и-анимации с угловой анимацией (нг-шоу)

Question

Добавление слайд-и-анимации с угловой анимацией (нг-шоу)

0

Таким образом, у меня есть два набора из 4 кнопок. Только 1 набор кнопок становится видимым по выражению ng-show за раз. Мне сложно работать с угловой анимацией css, чтобы создать слайд в ng-show-add и выложить на ng-show-remove. Вот мой код:

<script>
    angular.module('myApp', ['ngAnimate']).
    controller('theController', ['$scope', function($scope) {
        $scope.imageAnalysis = false;

        $scope.toggleImageBtns = function() {
            $scope.imageAnalysis = !$scope.imageAnalysis;
        };
    }]);
<script>
<body>
    <div class="container" ng-controller="theController">
        <div class="row feature-btns" ng-show="imageAnalysis === false">
            <div class="col-xs-3">
                <div class="btn btn-default"> feature btn 1 </div>
            </div>
            <div class="col-xs-3">
                <div class="btn btn-default"> feature btn 2 </div>
            </div>
            <div class="col-xs-3">
                <div class="btn btn-default"> feature btn 3 </div>
            </div>
            <div class="col-xs-3">
                <div class="btn btn-default" ng-click="toggleImageBtns()"> click me to see image buttons </div>
            </div>
        </div>
        <!-- /.row -->
        <div class="row image-btns" ng-show="imageAnalysis === true">
            <div class="col-xs-3">
                <div class="btn btn-default"> image btn 1 </div>
            </div>
            <div class="col-xs-3">
                <div class="btn btn-default"> image btn 2 </div>
            </div>
            <div class="col-xs-3">
                <div class="btn btn-default"> image btn 3 </div>
            </div>
            <div class="col-xs-3">
                <div class="btn btn-default" ng-click="toggleImageBtns()"> go back to feature buttons </div>
            </div>
        </div>
    </div>    
</body

Daniel Kobe 30 июнь 2015, в 18:34

Источник

Теги:

javascript

angularjs

css

angularjs-animation

1 ответ

Ещё вопросы

tsiorn · Accepted Answer · 2015-06-30T16-13-00.000Z

Вот фрагмент CSS, который будет скользить по вашим кнопкам справа. Это должно дать вам представление о классах, которые вам нужно использовать и которые можно манипулировать.

.feature-btns {
    position: absolute;
    top: 50px;
    left: 0;
    transition: 250ms ease-in-out all;
}
/* fade out content as it is hidden */
.feature-btns.ng-hide-add {
    opacity: 1.0;
}

.feature-btns.ng-hide-add-active {
    opacity: 0;
}
/* slide in from right*/
.feature-btns.ng-hide-remove {
    left: 100%;
    //left: 1100px;
    position: absolute;
    top: 50px;
}

.feature-btns.ng-hide-remove-active {
    left: 0;
}


.image-btns {
    position: absolute;
    top: 50px;
    left: 0;
    transition: 250ms ease-in-out all;
}
/* fade out content as it is hidden */
.image-btns.ng-hide-add {
    opacity: 1.0;
}

.image-btns.ng-hide-add-active {
    opacity: 0;
}
/* slide in from right*/
.image-btns.ng-hide-remove {
    left: 100%;
    //left: 1100px;
    position: absolute;
    top: 50px;
}

.image-btns.ng-hide-remove-active {
    left: 0;
}

Прекрасно работает, едва пришлось редактировать код. Один вопрос, в чем разница между классами ng-hide-remove и ng-hide-remove-active?
При изменении ngShow модуль ngAnimate добавит класс ng-hide-remove, чтобы запустить скрытую анимацию (начало анимации). Далее ngAnimate добавит класс ng-hide-remove-active (который мы установили, чтобы он содержал конечное состояние перехода), который будет длиться до завершения анимации.