vue动画钩子

<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
  top
  left
  right
  text-align center
  line-height
  font-size
  background pink
  .middle
    position absolute
    top 40px
    bottom 40px
    right
    left
    background #4d4446
    &.normal-enter-active, &.normal-leave-active
      transition: all .3s
    &.normal-enter, &.normal-leave-to
      transform: translate3d(%, , )
      opacity
    .middle-l
      display inline-block
      vertical-align top
      position relative
      width %
      height
      padding-top %
      .cd-wrapper
        position absolute
        left %
        top
        width %
        height %
        box-sizing border-box
        .cd
          width %
          height %
          border-radius %
          .image
            position absolute
            left
            top
            width %
            height %
            box-sizing border-box;
            border-radius %
            border 10px solid rgba(, , , 0.1)
  .toggle
    width %
    height 40px
    background #eee
    border none
    line-height 40px
    font-size 14px
  .mini
    position absolute
    bottom
    width %
    height 40px
    border none
    line-height 40px
    background #eee
    font-size 14px
</style>