vue2组件使用动画过渡,只有使用渐显动画有效果,使用滑入滑出就出现问题,请大神帮忙看看
发布于 2年前 作者 towa1234 1194 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

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

.leftmenu { /*transform: translateY(-100%); */ opacity: 1; } 修改值的时候,正常的时候恢复值 试一试

没明白你说的意思

<transition name="fade" mode="out-in">

</transition> 加上这个 mode="out-in"

已经找到原因了。子组件的CSS没有弄好,加入下面的就可以了 #leftmenu {positison:absolute;height:100%;width:100%;}

回到顶部