css实现层次显示的菜单动画

需求

一个下拉菜单每一条都从左到右显示，从右到左隐藏，后边比前边有一定的延迟。

思路

其实所有菜单项都在执行一个左右移动的动画，所以只需要写两个@keyframe

@keyframes show {
    0% {
        transform: translateX(-256px);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes hide {
    0% {
        transform: translateX(-256px);
    }
    100% {
        transform: translateX(0);
    }
}

在菜单展开的时候，添加类名onShow，执行show动画，隐藏时候添加类名onHIde，执行hide动画；

每项菜单添加动画延迟animation-delay，形成层次感。另外收起时应该最后一条先收回，animation-delay也要反向赋值了；

为什么这里要写两个动画而不使用animation-direction:alternate反向执行动画呢，这是因为后边需要使用到animation-fill-mode: both保持动画最后一帧。

结果

HTML

        <div
            class="nav_button"
            @click.stop="showNav=!showNav"
        ></div>
        <div
            class="nav_list"
            // 初始化showNav为null，否则刚进入页面就会执行一次动画
            v-if="showNav!=null"
        >
            <div
                class="nav_item"
                :class="{'active':curIndex == index,'onShow':showNav,'onHide':!showNav}"
                :style="{
                    'animation-delay':((showNav?index:(navList.length-index))+1)*0.5/navList.length+'s',
                    'animation-duration':'0.2s'
                    // 这里可以如果想固定时间的话
                    // 'animation-duration':1/navList.length 's'
                }"
                v-for="(item,index) in product.menuList"
                :key="index"
                @click="changeProduct(item,index)"
            >
                <span>{{item.name}}</span>
            </div>
        </div>

CSS

    .onShow {
        transform: translateX(0);
        animation-name: show;
        animation-timing-function: linear;
        animation-fill-mode: both;
    }
    .onHide {
        transform: translateX(-256px);
        animation-name: hide;
        animation-timing-function: linear;
        animation-fill-mode: both;
    }