diff --git a/live_monitor_vue/index.html b/live_monitor_vue/index.html index 27100a6..49cc643 100644 --- a/live_monitor_vue/index.html +++ b/live_monitor_vue/index.html @@ -26,6 +26,7 @@ + LiveMonitor diff --git a/live_monitor_vue/public/css/animation.css b/live_monitor_vue/public/css/animation.css new file mode 100644 index 0000000..71763c6 --- /dev/null +++ b/live_monitor_vue/public/css/animation.css @@ -0,0 +1,92 @@ +/* Определение анимации */ +@keyframes slide-left { + from { + transform: translateX(-100vw); /* Старт с -100% по оси X, чтобы меню было скрыто */ + opacity: 0; /* Начальная прозрачность для плавного появления */ + } + to { + transform: translateX(0vw); /* Конечное положение: на месте */ + opacity: 1; /* Полная видимость */ + } +} + +@keyframes appear-opacity { + from { + opacity: 0; /* Начальная прозрачность для плавного появления */ + } + to { + opacity: 1; /* Полная видимость */ + } +} + +.appear-opacity-100 { + animation: appear-opacity 0.1s ease-out forwards; +} + +.appear-opacity-200 { + animation: appear-opacity 0.2s ease-out forwards; +} + +.appear-opacity-300 { + animation: appear-opacity 0.3s ease-out forwards; +} + +.appear-opacity-400 { + animation: appear-opacity 0.4s ease-out forwards; +} + +.appear-opacity-500 { + animation: appear-opacity 0.5s ease-out forwards; +} + +.appear-opacity-600 { + animation: appear-opacity 0.6s ease-out forwards; +} + +.appear-opacity-700 { + animation: appear-opacity 0.7s ease-out forwards; +} + +.appear-opacity-800 { + animation: appear-opacity 0.8s ease-out forwards; +} + +.appear-opacity-900 { + animation: appear-opacity 0.9s ease-out forwards; +} + +.slide-left-100 { + animation: slide-left 0.1s ease-out forwards; +} + +.slide-left-200 { + animation: slide-left 0.2s ease-out forwards; +} + +.slide-left-300 { + animation: slide-left 0.3s ease-out forwards; +} + +.slide-left-400 { + animation: slide-left 0.4s ease-out forwards; +} + +.slide-left-500 { + animation: slide-left 0.5s ease-out forwards; +} + +.slide-left-600 { + animation: slide-left 0.6s ease-out forwards; +} + +.slide-left-700 { + animation: slide-left 0.7s ease-out forwards; +} + +.slide-left-800 { + animation: slide-left 0.8s ease-out forwards; +} + +.slide-left-900 { + animation: slide-left 0.9s ease-out forwards; +} diff --git a/live_monitor_vue/src/components/4_frames/AppContainer/AppContainer.vue b/live_monitor_vue/src/components/4_frames/AppContainer/AppContainer.vue index 10f7ba9..778a894 100644 --- a/live_monitor_vue/src/components/4_frames/AppContainer/AppContainer.vue +++ b/live_monitor_vue/src/components/4_frames/AppContainer/AppContainer.vue @@ -1,11 +1,12 @@