SHOW HIDE SLIDER

by jimyu

HTML

<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-animate.js"></script>
    <div ng-app="MyApp">
        <div ng-init="isHidden=false">
            <button ng-click="isHidden=!isHidden">Show / Hide Element</button>
            <div>
                <div class="slide A" ng-hide="isHidden">
                   AAAAAAA
                </div>

                <div class="slide B" ng-hide="!isHidden">
                   BBBBBBB
                </div>
                <div style="float: none; clear: both"></div>
            </div>
        </div>
    </div>

CSS

.slide {
    height: 100px;
    width: 100px;
    /*position: absolute;*/
    position: relative;
    left: 400px;
    float: left;
}

.slide.ng-hide-add {
    -webkit-transition: 2s linear all;
    -moz-transition: 2s linear all;
    -o-transition: 2s linear all;
    transition: 2s linear all;
    display: block !important;

}

.slide.ng-hide-remove {
    -webkit-transition: 2s linear all;
    -moz-transition: 2s linear all;
    -o-transition: 2s linear all;
    transition: 2s linear all;
    display: block !important;


}
.slide.ng-hide-remove {
    /*opacity:0;*/
    transition-delay: 2s;
    left: 0px;
}

    .slide.ng-hide-remove.ng-hide-remove-active {
        left: 400px;
        /*transition-delay: 2s;*/
        /*opacity:1;*/
    }

.slide.ng-hide-add {
      /*opacity:1;*/
    left: 400px;
}

    .slide.ng-hide-add.ng-hide-add-active {
         /*opacity:0;*/
        left: 0px;
    }

.A {
    background-color: #808080;
    z-index: 998;
}

.B {
    background-color: #f8cdcd;
    z-index: 999;
}

JavaScript

var myApp = angular.module("MyApp",["ngAnimate"]);