TweenMax+vue实现6种组件进入离开动画效果代码
代码语言:html
所属分类:动画
代码描述:TweenMax+vue实现6种组件进入离开动画效果代码,包括fade、slide、slideUp、zoom、flipX、flipY。
代码标签: TweenMax vue 6种 组件 进入 离开 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Ubuntu:bold' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css"> <style> * { box-sizing: border-box; } #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: 0.6; cursor: pointer; overflow: hidden; display: inline-block; height: 30px; margin: 0 10px; padding: 0 30px; border-radius: 10px; font: 0.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.0.3.js&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0