vue2组件使用动画过渡,只有使用渐显动画有效果,使用滑入滑出就出现问题,请帮忙

左边菜单栏是一个组件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>

回答:

class="leftmenu"删了。
过渡写在

.slideleft-enter(进入前的状态),
.slideleft-leave-to(离开后的状态)


按照你的意思应该写transform: translateY(-100%);
但是侧边栏不一般是左右滑动么。为啥要用Y


补充。希望你能养成不跨级使用absolute的好习惯。
没生效是因为样式(定位、宽高等)写的太糟糕了。感觉你步子迈的有点大了。私信我邮箱,改过的代码发你。

回答:

题主你好,Vue 的过渡是分状态的
具体可以参见 Vue 文档

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注