模仿 饿了吗这个详情页，从右往左划入实现不了，也不知道哪里错了

Question

<template >
  <div transition="move" class="food" v-show="showFlag">    
  </div>
</template>
<script type="text/ecmascript-6">
    export default{
        data(){
            return{
                showFlag:false
            }
        },
        components:{

        },
        props:{
            food:{
                tyoe:Object
            }
        },
        methods: {
            show(){
                this.showFlag=true;
            }
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
.food
    position:fixed;
    left:0;
    top:0;
    bottom:48px;
    z-index:30;
    width:100%;
    background-color :#fff;
    &.move-transition
        transition :all 0.3s linear;
        transform :translate3d(0,0,0);
    &.move-enter,&.move-leave
        transform :translate3d(100%,0,0);//表示一个从右向左的飞入动画         
</style>

Answer 1

github一堆这个项目的开源代码 自己去搜索去对比 比较快

Answer 2

.move-transition在哪用到了