Inherit transform свойство из предыдущего атрибута элемента

Question

У меня есть некоторые проблемы здесь, и я больше не знаю, как его решить.

У меня есть веб-страница с фиксированным sidebarmenu, называемым «toolmenu» (а не навигацией). Есть некоторые подсайты, которые содержат другое конкретное подменю для того, чтобы вспомогательный сайт мог перемещаться. Если пользователь переходит на такой сайт, инструментальная панель скользит вниз (через анимацию css), и подменю «затухает». Если пользователь покинет такой сайт, перейдя на другой сайт без такого меню суб-навигации, инструментальная панель снова вернется обратно.

Здесь приходит вызов:

Я хочу, чтобы наследовать высоту-навигация подменит (который устанавливается на «высоту: авто» в CSS) к toolmenu так, что toolmenu-анимация знает отправной точкой для его анимации.

Во-первых, у меня была высота меню суб-навигации, установленного на 200 пикселей, и поэтому анимация была основана на этой высоте. Код по-прежнему остается старым, поскольку я понятия не имел, как его динамически создавать.

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. Я также думал о DSS, используя PHP, но я не мог понять, как его реализовать. Если вам нужен какой-либо дополнительный код, пожалуйста, скажите мне, я хотел бы сохранить его максимально простым.

С наилучшими пожеланиями

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

Это лишь небольшой фрагмент кода, можно также создать метод анимации и применить его к любому классу вы хотите ... проверить дерзость здесь:

http://sass-lang.com/