如何实现子菜单的滑入效果

我们在对网站设计用户界面的时候，经常会给网站增加一些动画效果来提高用户交互的友好性，同时也使网站更具特色，比如添加文字、图片、菜单的淡入淡出/滑入滑出/转入转出动画等，本篇文章就介绍一下如何实现下拉子菜单的动态滑入效果。

本篇文章以 wordpress 为例介绍下拉菜单滑入效果的实现方法，该方法具有通用性，可以适用于其它网站菜单的情况。下拉菜单滑入效果是通过 javascript/css 的方式来实现的，主要由以下三个步骤构成：

一、首先给需要滑入的下拉菜单创建一个 CSS 类，该下拉菜单初始是不可见的，如下代码所示：

.main-navigation ul.sub-menu {
    display: block;
    left: -999em;/* 子菜单不可见 */
    margin: 0;
    position: absolute;
    z-index: 99999;
}
/* html 菜单示例 */
<ul class=".sub-menu">
  <li><a href="#">菜单项一</a></li>
  ...
</ul>

二、接下来使用 CSS 给下拉菜单定义动画，代码如下：

@-webkit-keyframes menuInDown {
	from {
    -webkit-transform: translate3d(0, 8%, 0);
    transform: translate3d(0, 8%, 0);
    visibility: visible;
	}

	to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	}
}
@keyframes menuInDown {
	from {
    -webkit-transform: translate3d(0, 8%, 0);
    transform: translate3d(0, 8%, 0);
    visibility: visible;
	}

	to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	}
}
@-webkit-keyframes menuOutUp {
	from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	}

	to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 8%, 0);
    transform: translate3d(0, 8%, 0);
	}
}
@keyframes menuOutUp {
	from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	}

	to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 8%, 0);
    transform: translate3d(0, 8%, 0);
	}
}
.menuUp {
  -webkit-animation-name: menuOutUp;
  animation-name: menuOutUp;
}
.menuDown {
  -webkit-animation-name: menuInDown;
  animation-name: menuInDown;
}
.animated {
  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

三、最后使用 javascript 触发动画效果，代码如下：

$(".main-navigation .primary-menu .sub-menu").addClass("animated");
$(".main-navigation .primary-menu .menu-item-has-children").hover(
   function() {
     $(".main-navigation .primary-menu .sub-menu").addClass("menuDown");
     $(".main-navigation .primary-menu .sub-menu").removeClass("menuUp")
   },
   function() {
     $(".main-navigation .primary-menu .sub-menu").addClass("menuUp");
     $(".main-navigation .primary-menu .sub-menu").removeClass("menuDown")
   }
);