vue+TweenMax实现6种页面过渡动画效果代码-html代码-BFW代码库

vue+TweenMax实现6种页面过渡动画效果代码

代码语言：html

所属分类：其他

代码描述：vue+TweenMax实现6种页面过渡动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
        box-sizing:border-box
}
body {
        background:#202020;
        font-size:62.5%
}
#app {
        overflow:hidden;
        position:absolute;
        left:0;
        top:0;
        width:100vw;
        height:100vh;
        background:#4c4c4c;
        background:-webkit-gradient(left top,right bottom,color-stop(0%,#4c4c4c),color-stop(36%,rgba(43,43,43,0.74)),color-stop(71%,rgba(28,28,28,0.5)),color-stop(100%,rgba(19,19,19,0.29)));
        background:linear-gradient(135deg,#4c4c4c 0,rgba(43,43,43,0.74) 36%,rgba(28,28,28,0.5) 71%,rgba(19,19,19,0.29) 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c",endColorstr="#131313",GradientType=1);
        color:#fff
}
.controls {
        position:absolute;
        left:50%;
        bottom:40px;
        transform:translate(-50%,0);
        width:100%;
        margin-top:30px;
        text-align:center;
        padding:0
}
.controls li {
        opacity:.6;
        cursor:pointer;
        overflow:hidden;
        display:inline-block;
        height:30px;
        margin:0 10px;
        padding:0 30px;
        border-radius:10px;
        font:.8rem/30px Arial,sans-serif;
        font-family:"Ubuntu",Helvetica,Arial,sans-serif;
        background:#505050
}
.controls li.active {
        background:#b6b6b6
}
.page {
        position:absolute;
        left:0;
        top:0;
        width:100vw;
        height:100vh;
        background:#c0c0c0
}
.page .center {
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        width:100%;
        font-size:3rem;
        text-align:center
}
.page h1 {
        width:100%;
        margin:0;
        padding:0;
        font-family:"Ubuntu",Helvetica,Arial,sans-serif;
        font-size:2.8rem;
        text-transform:capitalize
}
.page p {
        font-family:"Vollkorn",Georgia,Times,serif;
        font-size:1.1rem
}
.page a {
        transition:color 200ms ease-out;
        color:rgba(153,153,153,0.8)
}
.page a:hover {
        color:rgba(102,102,102,0.8)
}
.active-animation {
        position:absolute;
        top:30px;
        left:50%;
        transform:translate(-50%,0)
}
.fade {
        background:#461467
}
.slide {
        background:#ffba57
}
.zoom {
        background:#ffc8bb
}
.flipX {
        background:#00dfcf
}
.flipY {
        background:#8ed3c9
}
.slideUp {
        background:#f5dd79
}

    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <!-- App -->
    <div id="app">
        <component :is="state.view">
            <h1>{{state.view}}</h1>
        </component>
        <controls></controls>
    </div>
    <!-- Controls -->
    <template id="controls"><ul class="controls"><li v-for="(animation, index) in state.animations" @click.prevent="setView(animation)" v-bind:class="{ 'active': animation === state.view }">{{animation}}</li></ul></template>
    <!-- Transitions -->
    <template id="page"><transition v-on:enter="enter" v-on:leave="leave" v-bind:css="false" appear><div class="page" v-bind:class="state.view"><div cla.........完整代码请登录后点击上方下载按钮下载查看