Question

我在css中转换下拉菜单，在转移scaleY（0）到scaleY（1）。菜单顺利下拉。我的问题是如何扭转这种效果，当光标不再悬停时，父（和子）菜单需要用动画隐藏自我，而不仅仅是消失。这是css：

nav ul ul {
    visibility: hidden;
    width: 116px;
    height: 126px;
    position: absolute;
    top: 63px;

    -webkit-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);

    -webkit-transform-origin: top;
    -o-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;

    -webkit-transition: -webkit-transform 1s ease;
    -webkit-transition: -webkit-transform 1s ease;
    -webkit-transition: -webkit-transform 1s ease;
    transition: transform 0.5s ease;
}

ul li:hover > .menu_sub {
    visibility: visible;

    -webkit-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

提前致谢。

Answer 1

只是添加转换是正常的并且悬停状态它将在原始位置返回

nav ul ul {
    visibility: hidden;
    width: 116px;
    height: 126px;
    position: absolute;
    top: 63px;

    -webkit-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);

    -webkit-transform-origin: top;
    -o-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;

    -webkit-transition: -webkit-transform 1s ease;
    -ms-transition: -ms-transform 1s ease;
    -o-transition: -o-transform 1s ease;
    transition: transform 1s ease;
}

ul li:hover > .menu_sub {
    visibility: visible;

    -webkit-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);


    -webkit-transition: -webkit-transform 1s ease;
    -ms-transition: -ms-transform 1s ease;
    -o-transition: -o-transform 1s ease;
    transition: transform 1s ease;
}

CSS过渡反向效果

1 个答案: