javascript - 是什么让这些子导航扩展？

Question

我正在查看 http://voky.com.ua/showcase/sky-mega-menu/examples/demo-personal.html而且我无法弄清楚是什么使子导航扩展。例如，将鼠标悬停在“投资组合”上，会看到子导航展开。我已经检查了导航项周围的所有元素，但找不到任何 CSS3 transition 并且我也看不到 Javascript 向元素添加任何 style 属性或添加任何类。

Answer 1

这有两个部分；

展开效果是通过在菜单关闭时将scale属性设置为(0,0)然后来实现的(1,1) 当它可见时，并且具有用于动画计时的 transition 属性。这是相关的行；

/* line 60 */
.sky-mega-menu li > div {
  ...
  -o-transition: -o-transform 0.4s, opacity 0.4s;
  -ms-transition: -ms-transform 0.4s, opacity 0.4s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
}

/* line 374  */
.sky-mega-menu-anim-scale li > div {
  -o-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
}

/* line 380 */
.sky-mega-menu-anim-scale li:hover > div {
  -o-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}

悬停时子菜单的可见性是通过将其opacity设置为0然后在悬停在相应的li上时设置为1来实现的/p>

/* line 60 */
.sky-mega-menu li > div {
  ...
  opacity: 0;
}

/* line 101 */
.sky-mega-menu li:hover > div {
  opacity: 1;
}