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

        

        

            

                {{item.name}}
            
        

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;
    }