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

Question

I'm having some issue here and I have no further idea how to solve it.

I have a web page with a fixed sidebarmenu called 'toolmenu' (not the Navigation). There are some subsites which contain another specific submenu for the subsite to navigate around. If the user navigates to such a site, the toolmenu slides downwards (via css animation) and the submenu 'fades in'. If the user leaves such a site navigating to another site without this kind of sub-navigation-menu, the toolmenu slides back up again.

Here comes the challenge:

I want to inherit the height of the sub-Navigation-menu (which is set to "height:auto" in CSS) to the toolmenu so that the toolmenu-animation knows the starting point for its animation.

In the first place I had the height of the sub-navigation-menu set to 200px and therefore the animation was based on this height. The code is still the old one, since I had no idea how to create it dynamicly.

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

The page itself is generated via PHP and I have written some functions which validate from which site the user came and to which one he navigates, such that the animation is only triggered when needed.

I hope someone has an idea how to create such an dependency in CSS. I also thought about DSS using PHP but I couldnt get any idea how to implement it. If you need any further code please tell me, I wanted to keep it as simple as possible.

Best regards

Answer 1

Using Sass would be your best solution as one of its main features is inheritance with the ability to declare a class.

For an example :

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

This is just a small snippet , you could also create an animation method and apply it to whatever class you desire...check out sass here:

http://sass-lang.com/