Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Социальные группы Поиск Сообщения за день Заказать работу  
 
Рейтинг 4.96/25: Рейтинг темы: голосов - 25, средняя оценка - 4.96
179 / 74 / 8
Регистрация: 27.12.2012
Сообщений: 432
1

Анимация нескольких объектов: img + ul/li

23.10.2016, 21:41. Показов 4623. Ответов 7
Метки css, transformations, анимация (Все метки)
Author24 — интернет-сервис помощи студентам
Пытаюсь разместить img (class="menu_picture") по центру родителя так что бы при наведении на него срабатывала анимации смещения вверх и появлялось подменю из маркированого списка. Вместо этого при наведении на img сразу появляется подменю и начинается анимация. Как можно "прикрутить её сразу и к img и к ul/li?
Для удобства скопировал в редактор: https://jsfiddle.net/a2xck9m7/
Пробовал:
.menu_picture:hover, li
.menu_picture:hover ~ li
.menu_picture:hover + li
.menu_picture:hover, ul
.menu_picture:hover ~ ul
.menu_picture:hover + ul
Пробовал отдельно создавать класс и присваивать его нужным пунктам:
CSS
1
2
3
4
5
6
7
8
9

.move_li:hover{
    -webkit-transform: translate(0,-75px);
    -o-transform: translate(0,-75px);
    -moz-transform: translate(0,-75px);
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}
Пробовал добавлять анимацию в li a:hover и li:hover ul. Не работает

И вопрос "в догонку": почему подменю с годами в firefox, opera и dreamweaver cc вылазит в разных местах относительно родителя?

Код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
 
<body>
 
<!-- Страница выбора конкурса -->
<div class="flex-container">
 
<!-- Intel Techno -->
<ul><li><div class="div_center" style="background-color:#F48FB1"><img class="menu_picture" src="media/logo_isef_techno.png" />
    <ul class="menu">
    <li class="move_li"><a href="#">2012-2013</a></li> 
    <li class="move_li"><a href="#">2013-2014</a></li>
    <li class="move_li"><a href="#">2014-2015</a></li>
    <li class="move_li"><a href="#">2015-2016</a></li>
    <li class="move_li"><a href="#" class="brd">2016-2017</a></li> 
    </ul>
</div></li></ul>
 
</div>
<!-- Конец страницы выбора конкурса -->
 
</body>
 
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

@charset "utf-8";
/* CSS Document */
 
html, body {
    height: 100%;
}
 
body {
    margin: 0px;
}
 
.flex-container{
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.div_center{
    display : flex;
    flex-direction : row;
    justify-content : center;
    align-items : center;
    width: 150px;
    height: 500px;
    padding: 0;
    margin: 0;
}
 
.menu_picture:hover{
    width: 150px;
    height: 150px;
    transform: translate(0,-75px);
    -webkit-transform: translate(0,-75px);
    -o-transform: translate(0,-75px);
    -moz-transform: translate(0,-75px);
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}
 
.menu_picture:not(:hover){
    width: 150px;
    height: 150px;
    transform: translate(0,75px);
    -webkit-transform: translate(0,75px);
    -o-transform: translate(0,75px);
    -moz-transform: translate(0,75px);
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}
 
/* Стили для меню */
ul {
    width: 150px; /* Ширина меню */
    list-style: none; /* Для списка убираем маркеры */
    margin: 0; /* Нет отступов вокруг */
    padding: 0; /* Убираем поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
    font-size: 10pt; /* Размер названий в пункте меню */
    margin: 5px; /* Отступ между пунктами меню */
}
li ul {
    position: absolute; /* Подменю позиционируются абсолютно */
    display: none; /* Скрываем подменю */
    margin-left: 0px; /* Сдвигаем подменю влево */
    margin-top: 150px; /* Сдвигаем подменю вниз */
}
li a {
    display: block; /* Ссылка как блочный элемент */
    padding: 5px; /* Поля вокруг надписи */
    text-decoration: none; /* Подчеркивание у ссылок убираем */
    color: #666; /* Цвет текста */
    border: 1px solid #ccc;/* Рамка вокруг пунктов меню */
    background-color: #f0f0f0; /* Цвет фона */
    border-bottom: none; /* Границу снизу не проводим */
    text-align: center;
    color:#FF0004; /* Цвет текста пунктов */
}
li a:hover {
    color: #ffe; /* Цвет текста активного пункта */
    background-color: #5488af; /* Цвет фона активного пункта */  
}
li:hover ul { 
    display: block; /* При выделении пункта курсором мыши отображается подменю */
}
.brd {
    border-bottom: 1px solid #ccc; /* Линия снизу */
}
 
/* Конец стилей меню */
Добавлено через 1 час 8 минут
0
Лучшие ответы (1)
Сообщение: #9680414
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 23.10.2016, 21:41
Ответы с готовыми решениями:

Анимация для нескольких объектов
Всем, доброго времени суток! Вопрос состоит вот в чем... Есть 3 бота, на каждом их которых висят...

Графика: одновременная анимация нескольких объектов
Привет, подскажите как сделать, чтобы все эти 4 объекта запускались одновременно, а не как сейчас...

Циклическая анимация нескольких объектов друг за другом
Доброго времени суток) Есть 5 объектов, для каждого из них настроен анимационный эффект....

Анимация "затухания" нескольких объектов
Здравствуйте, необходимо плавно затушить несколько объектов разом в частности QLabel и QLineEdit....

7
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
23.10.2016, 21:44 2
стиль display не анимируется. Используете opacity.
1
179 / 74 / 8
Регистрация: 27.12.2012
Сообщений: 432
23.10.2016, 21:56  [ТС] 3
Т.е. заменить все списки на div и анимировать их создав новый класс?
Или можно сделать как-то так:
.menu_picture:hover, .div_menu
.menu_picture:hover +.div_menu
.menu_picture:hover ~ .div_menu
И немного оффтоп: почему display блок в разных браузерах "вылазит" в разных местах?
0
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
23.10.2016, 22:17 4
Как вариант анимированного появления:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.block1{
  width:100px;
  height: 100px;
  background-color:red;
}
.block2{
  width:100px;
  height:0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2s;
  background-color:red;
}
.block1:hover ~.block2{
  opacity: 1;
  height:100px;
}
HTML5
1
2

<div class="block1"></div>
<div class="block2"></div>
Добавлено через 12 минут
А насчет остального, я теряюсь что вы там наворотили.
У вас есть стиль:
CSS
1
2

li ul {
    position: absolute; /* Подменю позиционируются абсолютно */
А подменю позиционируется относительно чего?
И зачем вам там flex?
1
179 / 74 / 8
Регистрация: 27.12.2012
Сообщений: 432
23.10.2016, 23:09  [ТС] 5
flex для того что бы вот этот кусок (а он не один такой) держался центра экрана:
HTML5
1
2
3
4
5
6
7
8
9

<ul><li><div class="div_center" style="background-color:#F48FB1"><img class="menu_picture" src="media/logo_isef_techno.png" />
    <ul class="menu">
    <li class="move_li"><a href="#">2012-2013</a></li> 
    <li class="move_li"><a href="#">2013-2014</a></li>
    <li class="move_li"><a href="#">2014-2015</a></li>
    <li class="move_li"><a href="#">2015-2016</a></li>
    <li class="move_li"><a href="#" class="brd">2016-2017</a></li> 
    </ul>
</div></li></ul>
Из того что нагуглил наиболее вменяемым выглядел пример с flex.

Цитата Сообщение от mrtoxas Посмотреть сообщение
А подменю позиционируется относительно чего?
Тут ответить не могу т.к. код взят из гугла и до конца пока не понят

Для удобства прикладываю целиком файлами: backup3+.rar
0
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
23.10.2016, 23:15 6
Вот вам заимствованный, теперь уже из киберфорума, код
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

@charset "utf-8";
/* CSS Document */
 
html, body {
    height: 100%;
}
 
body {
    margin: 0px;
}
 
.flex-container{
    height: 100%;
    padding: 0;
    margin: 0;
}
.flex-container>ul{
  margin:0 auto;
}
 
.div_center{
    width: 150px;
    height: 500px;
    padding: 0;
    margin: 0;
}
 
.menu_picture:hover{
    width: 150px;
    height: 150px;
    transform: translate(0,-75px);
    -webkit-transform: translate(0,-75px);
    -o-transform: translate(0,-75px);
    -moz-transform: translate(0,-75px);
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}
 
.menu_picture:not(:hover){
    width: 150px;
    height: 150px;
    transform: translate(0,75px);
    -webkit-transform: translate(0,75px);
    -o-transform: translate(0,75px);
    -moz-transform: translate(0,75px);
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}
 
/* Стили для меню */
ul {
    width: 150px; /* Ширина меню */
    list-style: none; /* Для списка убираем маркеры */
    margin: 0; /* Нет отступов вокруг */
    padding: 0; /* Убираем поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
    font-size: 10pt; /* Размер названий в пункте меню */
    margin: 5px; /* Отступ между пунктами меню */
}
li ul {
    position: absolute; /* Подменю позиционируются абсолютно */
    display: none; /* Скрываем подменю */
    margin-left: 0px; /* Сдвигаем подменю влево */
    margin-top: 150px; /* Сдвигаем подменю вниз */
}
li a {
    display: block; /* Ссылка как блочный элемент */
    padding: 5px; /* Поля вокруг надписи */
    text-decoration: none; /* Подчеркивание у ссылок убираем */
    color: #666; /* Цвет текста */
    border: 1px solid #ccc;/* Рамка вокруг пунктов меню */
    background-color: #f0f0f0; /* Цвет фона */
    border-bottom: none; /* Границу снизу не проводим */
    text-align: center;
    color:#FF0004; /* Цвет текста пунктов */
}
li a:hover {
    color: #ffe; /* Цвет текста активного пункта */
    background-color: #5488af; /* Цвет фона активного пункта */ 
}
li:hover ul { 
    display: block; /* При выделении пункта курсором мыши отображается подменю */
}
.brd {
    border-bottom: 1px solid #ccc; /* Линия снизу */
}
 
/* Конец стилей меню */
А еще сижу смотрю на :not(:hover) и то ли я уже спать хочу...
Какого вы эффекта пытаетесь достичь? Чтобы картинка наезжала на меню?
1
179 / 74 / 8
Регистрация: 27.12.2012
Сообщений: 432
23.10.2016, 23:35  [ТС] 7
Цитата Сообщение от mrtoxas Посмотреть сообщение
Какого вы эффекта пытаетесь достичь? Чтобы картинка наезжала на меню?
Nope. Что-то вроде такого: картинка выезжает вверх, меню появляется/выезжает вниз.
Хотя для меня сейчас больше непонятна разница в отрисовке меню разными браузерами (т.к. они все на движке chromium и как-бы обязаны выдавать одинаковый рендер страниц)
з.ы. Пробовал такую структуру:
HTML5
1
2
3
4
5
6

<div>
    <img>
    <div2>
        <ul></ul>
    </div2>
</div>
но все равно не получается раздельно управлять анимацией img и div2.
Есть ли смысл сейчас писать
CSS
1
2
3

    -webkit-transform: translate(0,75px);
    -o-transform: translate(0,75px);
    -moz-transform: translate(0,75px);
если все браузеры уже пару лет на одном движке? (т.е. вероятность напороться на крайне устаревшую версию довольно мала)
0
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
24.10.2016, 00:10 8
Лучший ответ Сообщение было отмечено Singleton как решение

Решение

Вот, может поможет чем-то
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

html,
body {
  height: 100%;
}
.wrapper {
  width: 150px;
  height: 100%;
  background-color: orange;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.menu-cap {
  position: relative;
  z-index: 9;
  width: 140px;
  height: 140px;
  margin: 0 auto;
}
.cap {
  background-color: tomato;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 1s;
  transition: 1s;
}
.menu {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s, -webkit-transform 1s;
}
.wrapper:hover .menu-cap .cap {
  top: -100%;
}
.wrapper:hover .menu {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.menu {
  margin: 0;
  padding: 0;
}
.menu-item {
  text-align: center;
  padding: 2px;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  background-color: #f0f0f0;
}
.menu-item:last-child {
  border-bottom: 1px solid #ccc;
}
.menu-item:hover {
  background-color: #5488af;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12

<div class="wrapper">
  <div class="menu-cap">
    <div class="cap"></div>
  </div>
  <ul class="menu">
    <li class="menu-item">item1</li>
    <li class="menu-item">item2</li>
    <li class="menu-item">item3</li>
    <li class="menu-item">item4</li>
    <li class="menu-item">item5</li>
  </ul>
</div>
1
24.10.2016, 00:10
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 24.10.2016, 00:10
Помогаю со студенческими работами здесь

3d анимация 2d объектов
вообще, возможно ли такое действие? все примеры, найденные в просторах &quot;большого брата&quot; описывали...

Анимация объектов
Друзья, помогите, написать программу в которой буквы строки текста, введёного с клавиатуры будут...

Анимация объектов
Анимировать прямолинейное равномерное движение как минимум 3х объектов.Помогите сделать ...

Анимация объектов imageView
Доброго времени суток. Посоветуйте, каким образом возможно реализовать анимацию передвижения и...

Одна анимация для 10 объектов
Как установить одну анимацию для большого количества объектов ,имеется 10 одинаков объектов...

Синхронная анимация на множестве объектов
Всем доброго времени суток. Вопрос по Unity 2D. Есть множество экземпляров одного объекта -...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru