左边菜单栏是一个组件leftmenu，想让它在点击按钮时显示，并且有动画效果，从左边滑入。点击遮罩层隐藏，动画效果左边滑出。但是目前只有渐显动画有效果，使用transform后没有效果，请各位大神帮忙看看。

这是页面的代码：

<template>
    <div id="index">
        <header-sm title1='栏目标题' btnshow='y'></header-sm>
        <transition name="slideleft">
            <leftmenu v-show="$store.state.leftmenuShow" class="leftmenu"></leftmenu>
        </transition>
    </div>

</template>

<script>
    import headerSm from '../components/header-sm'
    import leftmenu from '../components/leftmenu'
    export default {
        name: 'index',
        methods: {
            gocreatSelect: function() {
                this.$router.push({
                    path: '/'
                })
            }
        },
        components: {
            headerSm,
            leftmenu
        }
    }
</script>

<style lang="less" scoped>
    @import '../assets/less/variables.less';
    #index {
        background-color: @body-bg;
    }
    
    .slideleft-enter-active,
    .slideleft-leave-active {
        transition: all .8s;
    }
    
    .slideleft-enter,
    .slideleft-leave-to {
        /* transform: translateY(0); */
        opacity: 0;
    }
    
    .leftmenu {
        /*transform: translateY(-100%); */
    }
</style>

这是子组件leftmenu的代码：

<template>
  <div id="leftmenu">
      <div class="menu-item">
          <p class="txt-lg">导航菜单</p>
          <p class="txt-md">标题标题标题标题</p>
      </div>
       <div class="shadow" @click='closeMenu'></div>
  </div>
</template>

<script>
    export default {
        name: 'leftmenu',
        methods:{
            closeMenu:function(){
                this.$store.state.leftmenuShow = false
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '../assets/less/variables.less';
    #leftmenu {
        .shadow {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 99;
            background: rgba(0, 0, 0, 0.3);
        }
        .menu-item {
            width: 70%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 100;
            background-color:@gray-dark;
            .txt-lg,.txt-md{text-align: center;color: #fff;}
        }
    }
</style>