饿了么项目---10、（2）vue2.0给嵌套的元素做多个动画

本节知识点：
如何让小方块做抛物线动画
- 单个元素做动画只能实现从右上角到左下角的上下斜线平移
- 类名为wai的外层元素做y轴过渡，先向上平移（负方向）再向下平移（正方向），使用贝塞尔曲线自定义过渡动画
- 类名为lit的内层元素做x轴过渡，向左平移（负方向）
- HTML部分

<template>
   <div class="ratings">
    <button @click='slidelit'>移动小方块</button>
    <transition name='slide'>
      <div class='wai' v-show='lit_show'>
        <div class='lit'></div>
      </div>
    </transition>
   </div>
</template>

• javascript部分

<script>

export default {
  name: 'ratings',
  data(){
    return {
      lit_show :false
    }
  },
  methods:{
    slidelit(){
      this.lit_show = !this.lit_show 
    }
  }
}
</script>

• css部分

<style lang="stylus" rel="stylesheet/stylus" scope>
     .wai
       position:fixed
       left:250px
       bottom:400px
       transition:all 2s cubic-bezier(.76,-0.75,.36,.94)
       &.slide-enter,&.slide-leave-to
         transform:translate3d(0,200px,0)
       &.slide-enter .lit,&.slide-leave-to .lit
         transform:translate3d(-200px,0,0)
     .lit
       width:50px
       height:50px
       background:pink
       transition:all 2s linear
</style>