Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Directive-less ng-pageslide
.ng-pageslide {
z-index: 1000;
position: fixed;
width: 0;
height: 0;
-moz-transition-property: width, height; /* Firefox 4 */
-webkit-transition-property: width, height; /* Safari and Chrome */
-o-transition-property: width, height; /* Opera */
transition-property: width, height;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
}
.ng-pageslide-right, .ng-pageslide-left {
height: 100%;
top: 0px;
bottom: 0px;
}
.ng-pageslide-right {
right: 0px;
}
.ng-pageslide-left {
left: 0px;
}
.ng-pageslide-right.open, .ng-pageslide-left.open {
width: 350px;
}
.ng-pageslide-top, .ng-pageslide-bottom {
width: 100%;
top: 0px;
bottom: 0px;
right: 0px;
}
.ng-pageslide-top {
top: 0px;
}
.ng-pageslide-bottom {
bottom: 0px;
}
.ng-pageslide-top.open, .ng-pageslide-bottom.open {
height: 300px;
}
.ng-pageslide > div, .ng-pageslide.open-remove > div {
display: none;
}
.ng-pageslide.open > div {
display: block;
}
.ng-pageslide.open-add > div {
display: none;
}
<div class="ng-pageslide ng-pageslide-left" ng-class="{'open': panels.state }">
<div id="ui">
CONTENT
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.