Question

我在这里有一些问题，我不知道如何解决它。

我有一个带有固定侧栏菜单的网页，名为“toolmenu”（不是导航）。有一些子网站包含子网站导航的另一个特定子菜单。如果用户导航到这样的站点，工具菜单向下滑动（通过css动画）并且子菜单'淡入'。如果用户离开这样的站点导航到没有这种子导航菜单的其他站点，工具菜单将再次滑回。

接下来是挑战：

我想将子导航菜单（在CSS中设置为“height：auto”）的高度继承到工具菜单，以便工具菜单动画知道其动画的起点。

首先，我将子导航菜单的高度设置为200px，因此动画基于此高度。代码仍然是旧的，因为我不知道如何动态地创建它。

div.toolmenu_animated_moveDown {
    animation-name: moveDown;
    animation-duration: 0.5s;
}

div.toolmenu_animated_moveUp {
    animation-name: moveUp;
    animation-duration: 0.5s;
}

@keyframes moveDown {
from {transform: translateY(-235px);}
to {transform: translateY(0px);}
}

@keyframes moveUp {
from {transform: translateY(235px);}
to {transform: translateY(0px);}
}
div.submenu, div.submenu_animated {
text-align: center;
float: left;
background-color: #FFC981;
border-radius: 10px;
width: 200px;
height: 200px;
margin: 20px 10px 0px 10px;
padding: 10px 5px 5px 0px;
box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.50);
}

div.submenu_animated {
    animation-name: fadeIn;
    animation-duration: 2s;
}

@keyframes fadeIn {
0%   {opacity: 0;}
25%  {opacity: 0;}
50%  {opacity: 1;}
50%  {opacity: 1;}
100% {opacity: 1;}
}

页面本身是通过PHP生成的，我编写了一些函数来验证用户来自哪个站点以及他导航到哪个站点，这样动画只在需要时触发。

我希望有人知道如何在CSS中创建这样的依赖。我也考虑过使用PHP的DSS，但我无法知道如何实现它。如果您需要任何进一步的代码请告诉我，我希望尽可能简单。

祝你好运

Answer 1

使用Sass将是您最好的解决方案，因为其主要功能之一是能够声明类的继承。

举个例子：

    .submenu_animated{
text-align: center;
float: left;
background-color: #FFC981;
border-radius: 10px;
width: 200px;
height: 200px;
margin: 20px 10px 0px 10px;
padding: 10px 5px 5px 0px;
box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.50);
}

.tools_menu{
@extend .submenu_animated;
}

这只是一个小片段，你也可以创建一个动画方法并将它应用到你想要的任何课程......在这里查看sass：

http://sass-lang.com/

从前一个元素属性继承transform属性

1 个答案: