<template>
<div class="hello">
<div class="toggle" @click="fullScreen = !fullScreen" v-show="fullScreen">toggle</div>
<transition name="normal"
@enter="enter"
@after-enter="afterEnter"
@leave="leave"
@after-leave="afterLeave">
<div class="middle" v-show="fullScreen">
<div class="middle-l">
<div class="cd-wrapper">
<div class="cd">
<img class="image" src="./s.jpg">
</div>
</div>
</div>
</div>
</transition>
<div v-show="!fullScreen" @click="fullScreen = !fullScreen" class="mini">mini</div>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
show: true,
fullScreen: true
}
},
methods: {
enter(el, done) {
console.log('enter')
done()
},
afterEnter() {
console.log('afterEnter')
},
leave(el, done) {
console.log('leave')
done()
},
afterLeave() {
console.log('afterLeave')
},
}
}
</script>

<style lang="stylus" scoped>
.hello
position fixed
bottom 0
top 0
left 0
right 0
text-align center
line-height 0
font-size 0
background pink
.middle
position absolute
top 40px
bottom 40px
right 0
left 0
background #4d4446
&.normal-enter-active, &.normal-leave-active
transition: all 0.3s
&.normal-enter, &.normal-leave-to
transform: translate3d(100%, 0, 0)
opacity 0
.middle-l
display inline-block
vertical-align top
position relative
width 100%
height 0
padding-top 80%
.cd-wrapper
position absolute
left 10%
top 0
width 80%
height 100%
box-sizing border-box
.cd
width 100%
height 100%
border-radius 50%
.image
position absolute
left 0
top 0
width 100%
height 100%
box-sizing border-box;
border-radius 50%
border 10px solid rgba(255, 255, 255, 0.1)
.toggle
width 100%
height 40px
background #eee
border none
line-height 40px
font-size 14px
.mini
position absolute
bottom 0
width 100%
height 40px
border none
line-height 40px
background #eee
font-size 14px
</style>