Skip to content

Instantly share code, notes, and snippets.

@stevek-pro
Created Feb 14, 2020
Embed
What would you like to do?
Vue2 Page Transitions Part 1 - Controls - https://codepen.io/timrijkse/pen/ALgZpp
<template>
<div id="app">
<component :is="state.view">
<h1>{{ state.view }}</h1>
</component>
<controls></controls>
</div>
</template>
<script>
import Box from './components/Controls.vue'
export default {
components: { Controls },
data() {
return {}
}
}
</script>
<style>
#app {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: rgba(76,76,76,1);
background: -moz-linear-gradient(-45deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(76,76,76,1)), 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: -webkit-linear-gradient(-45deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);
background: -o-linear-gradient(-45deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);
background: -ms-linear-gradient(-45deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);
background: linear-gradient(135deg, rgba(76,76,76,1) 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;
}
</style>
<!-- Controls -->
<template id="controls">
<ul class="controls">
<li v-for="(animation, index) in this.state.animations" @click.prevent="setView(animation)" v-bind:class="{ 'active': animation === this.state.view }">
{{ animation }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
state: {
animations: ['fade', 'slide', 'slideUp', 'zoom', 'flipX', 'flipY'],
view: 'slide'
}
}
},
methods: {
setView(animation) {
state.view = animation
}
}
}
</script>
<style>
.page {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: #c0c0c0;
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
font-size: 3rem;
text-align: center;
}
h1 {
width: 100%;
margin: 0;
padding: 0;
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
font-size: 2.8rem;
text-transform: capitalize;
}
p {
font-family: 'Vollkorn', Georgia, Times, serif;
font-size: 1.1rem;
}
a {
transition: color 200ms ease-out;
color: darken(rgba(#fff, .8), 40%);
&:hover {
color: darken(rgba(#fff, .8), 60%);
}
}
}
</style>
4:3 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key
4:26 error 'index' is defined but never used vue/no-unused-vars
16:2 error Mixed spaces and tabs no-mixed-spaces-and-tabs
17:2 error Mixed spaces and tabs no-mixed-spaces-and-tabs
24:7 error 'state' is not defined no-undef
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment