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 class="center"><slot></slot></div></div></transition></template>
    <!-- partial -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
    <script>
        // State
        const state = {
          animations: ['fade', 'slide', 'slideUp', 'zoom', 'flipX', 'flipY'],
          view: 'slide' };
        
        
        // Controls
        const controls = Vue.component('controls', {
          template: '#controls',
          data: state,
          methods: {
            setView(animation) {
              state.view = animation;
            } } });
        
        
        
        // Transitions
        const fade = Vue.component('fade', {
          template: '#page',
          methods: {
            enter(el, done) {
              TweenMax.fromTo(el, 1, {
                autoAlpha: 0,
                scale: 1.5 },
              {
                autoAlpha: 1,
                scale: 1,
                transformOrigin: '50% 50%',
                ease: Power4.easeOut,
                onComplete: done });
        
            },
            leave(el, done) {
              TweenMax.fromTo(el, 1, {
                autoAlpha: 1,
         .........完整代码请登录后点击上方下载按钮下载查看