CSS 过渡反转效果

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