Vue2 components use animation transition, only use fade-in animation has effect, and use slide-in and slide-out will cause problems, please help

  html5, question

The menu bar on the left is a component leftmenu, which wants to be displayed when the button is clicked and has animation effect. Slide in from the left. Click on the mask layer to hide, and the animation effect slides out to the left. However, at present, only gradual animation has effect, but it has no effect after using transform. Please help me to look at it.

This is the code for the page:

<template>
 <div id="index">
 < header-sm title1=' column title' 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: '/'
 })
 bracket
 },
 components: {
 headerSm,
 leftmenu
 bracket
 bracket
 </script>
 
 <style lang="less" scoped>
 @import '../assets/less/variables.less';
 #index {
 background-color: @body-bg;
 bracket
 
 .slideleft-enter-active,
 .slideleft-leave-active {
 transition: all .8s;
 bracket
 
 .slideleft-enter,
 .slideleft-leave-to {
 /* transform: translateY(0);  */
 opacity: 0;
 bracket
 
 .leftmenu {
 /*transform: translateY(-100%);  */
 bracket
 </style>

This is the code for sub-component leftmenu:

<template>
 <div id="leftmenu">
 <div class="menu-item">
 < p class="txt-lg "> navigation menu < /p >
 < p class="txt-md "> title title title < /p >
 </div>
 <div class="shadow" @click='closeMenu'></div>
 </div>
 </template>
 
 <script>
 export default {
 name: 'leftmenu',
 methods:{
 closeMenu:function(){
 this.$store.state.leftmenuShow = false
 bracket
 bracket
 bracket
 </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);
 bracket
 .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;  bracket
 bracket
 bracket
 </style>

class="leftmenu"I deleted it.
The transition is written in

. slideleft-enter,
 . slideleft-leave-to

inside
According to what you mean, it should be writtentransform: translateY(-100%);
But don’t side bars usually slide left and right? Why y


Supplement. I hope you can get into the good habit of not using absolute across levels.
It didn’t take effect because the style (positioning, width, etc.) was badly written. I feel that you are taking a little too big a step. Letter to my email and send you the revised code.