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 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>