API Docs for: 1.3.1
Show:

File: usage/demo/page/ani-page.scss

@charset "utf-8";
@import "../layout/layout";
@import "../module/m-demo";
@import "../module/m-code";
@import "../../../lib/element/yo-btn";

/**
 * Page Animation Switch 演示页面
 * Author: joy.du(飘零雾雨)
 * Time: 2015.2.5
 */
// layout
@include responsive(mobile) {
    .m-demo .device .stage {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: auto;
    }
}


//背景颜色
$bgcolor:#0ac2d2 #7bb7fa #60d7a9 #fdc162 #fd6a62 #f68dbb;

.pages {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    .page {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
        visibility: hidden;
        &.current {
            visibility: visible;
            z-index: 1;
        }
    }
    @for $i from 1 through length($bgcolor) {
        .page-#{$i} {
            background: nth($bgcolor,$i);
        }
    }
    .con {
        @include alignment(2.8rem, 3.8rem);
        z-index: 2;
        > h1 {
            color: rgba(255, 255, 255, .6);
            font-size: .64rem;
        }
        > h2 {
            color: rgba(0, 0, 0, .2);
            font-size: .3rem;
        }
        > p {
            color: rgba(255, 255, 255, .9);
            font-size: .36rem;
        }
        > .yo-btn,
        > select {
            width: 70%;
            height: .44rem;
            margin: .1rem 0;
            padding: 0 .15rem;
            border: 0;
            border-radius: .02rem;
            line-height: .44rem;
            box-shadow: 0 .03rem 0 rgba(0, 0, 0, .1);
            background: #fff;
            color: #aaa;
            cursor: pointer;
            font-size: .16rem;
        }
        > .yo-btn {
            font-weight: bold;
        }
        > select {
            @include appearance;
            text-transform: capitalize;
            background-size: .1rem .1rem;
            background-repeat: no-repeat;
            background-position: right .1rem center;
            background-image: radial-gradient(circle, #0ac2d2, #0ac2d2 50%, transparent, transparent);
        }
    }
}