ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS Transition
15 сообщений из 15, страница 1 из 1
CSS Transition
    #39236294
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
Добрый день уважаемые спецы. Написал на css и html выпадающее меню, хотел немного украсить с помощью transition , но почему то работает как то неадекватно...сидел над этим час, не могу понять. Хочу, чтобы при наведении на .relmenu li у блока .submenu менялись свойства opacity и visibility. Т.е чтобы блок .submenu менял постепенно прозрачность с 0.5 на 1 и становился видимым. Но отрабатывает как то неадекватно и даже не всегда. Когда навожу на .relmenu li блок .submenu сначала имеет прозрачность 1 и начинает постепенно переходить на 0.5 (хотя я жду эффекта с точностью до наоборот) и достигнув значения 0.5 снова резко становится 1(((. Про visibility вообще молчу, не работает. Может это свойство вообще не работает с transition как и display?



Заранее спасибо за ликбез!
...
Рейтинг: 0 / 0
16.05.2016, 10:14
| Ответить | Цитировать | Написать  
CSS Transition
    #39236322
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
vdekameronчтобы блок .submenu менял постепенно прозрачность с 0.5 на 1 и становился видимым. Но отрабатывает как то неадекватно и даже не всегда
Работает вполне адекватно и всегда...

Код: html
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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
li {
	opacity: 0.5;
	transition-property: opacity;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
li:hover {
	opacity: 1;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<ul>
	<li>Item 0</li>
	<li>Item 1</li>
	<li>Item 2</li>
</ul>
</body>
</html>
...
Рейтинг: 0 / 0
16.05.2016, 10:45
| Ответить | Цитировать | Написать  
CSS Transition
    #39236385
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
krvsa,

Это понятно, я тоже могу написать простейший код где все будет работать. Я про свой код...вот там не работает, вернее работает как то непонятно.
...
Рейтинг: 0 / 0
16.05.2016, 11:48
| Ответить | Цитировать | Написать  
CSS Transition
    #39236483
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
.relmenu li:hover .submenu{
display: block;
opacity: 1;
}

.submenu{
background-color: #f4f4f4;
display: none;
position: absolute;
top: -150px;
left: 100%;
opacity: 0.5;
padding: 0px 15px 50px;
transition-duration: 2s;
transition-property: opacity;
width: 205px;
}
...
Рейтинг: 0 / 0
16.05.2016, 13:22
| Ответить | Цитировать | Написать  
CSS Transition
    #39236486
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
.relmenu li:hover .submenu{
	display: block;
	opacity: 1;
}

.submenu{
	background-color: #f4f4f4;
	display: none;
	position: absolute;
	top: -150px;
	left: 100%;
	opacity: 0.5;
	padding: 0px 15px 50px;
	transition-duration: 2s;
	transition-property: opacity;
	width: 205px;
}
...
Рейтинг: 0 / 0
16.05.2016, 13:23
| Ответить | Цитировать | Написать  
CSS Transition
    #39236679
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
vdekameronя тоже могу написать простейший код где все будет работать. Я про свой код...вот там не работает, вернее работает как то непонятно.
Вот бери мой пример и показывай после чего у тебя перестает работать.
Только полный пример, как у меня, а не те огрызки, что ты приписал...
...
Рейтинг: 0 / 0
16.05.2016, 15:51
| Ответить | Цитировать | Написать  
CSS Transition
    #39236703
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
vdekameron
Код: css
1.
2.
	display: none;
	opacity: 0.5;


Такая комбинация не имеет смысла...
...
Рейтинг: 0 / 0
16.05.2016, 16:05
| Ответить | Цитировать | Написать  
CSS Transition
    #39236926
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
krvsaВот бери мой пример и показывай после чего у тебя перестает работать.

Уже скинул свой пример) это во-первых.
krvsavdekameron
Код: css
1.
2.
	display: none;
	opacity: 0.5;



Такая комбинация не имеет смысла...
а во-вторых большое спасибо! Именно поэтому и не работало. Именно потому что эта комбинация не имеет смысла. Я не знал даже об этом. А вот попробовал комбинацию:
Код: css
1.
2.
opacity: 0.5;
visibility: none;



вуаля, все работает, хотя я думал что будет аналогично первому.
...
Рейтинг: 0 / 0
16.05.2016, 21:46
| Ответить | Цитировать | Написать  
CSS Transition
    #39237055
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
vdekameronУже скинул свой пример) это во-первых.
Пример должен быть простой и выкладывать его нужно как я простым текстом. Качать что-то мало кому интересно...
vdekameronя думал что будет аналогично первому.
Элемент с
Код: css
1.
display: none;


вообще никак не обрабатывается. Т.е. его просто нет.
А вот с
Код: css
1.
visibility: none;


обрабатывается. Т.к. нужно знать (как минимум) сколько места он займет на странице...
...
Рейтинг: 0 / 0
17.05.2016, 08:10
| Ответить | Цитировать | Написать  
CSS Transition
    #39237060
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
krvsaПример должен быть простой и выкладывать его нужно как я простым текстом. Качать что-то мало кому интересно...

Учту на будущее!
krvsaЭлемент с
Код: css
1.
display: none;



вообще никак не обрабатывается. Т.е. его просто нет.
А вот с
Код: css
1.
visibility: none;



обрабатывается. Т.к. нужно знать (как минимум) сколько места он займет на странице...

Спасибо! буду знать!
...
Рейтинг: 0 / 0
17.05.2016, 08:18
| Ответить | Цитировать | Написать  
CSS Transition
    #39237168
Фёдор К
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Фёдор К
Гость
vdekameron,
Поправочка: visibility:hidden;
...
Рейтинг: 0 / 0
17.05.2016, 11:12
| Ответить | Цитировать | Написать  
CSS Transition
    #39238565
vdekameron
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vdekameron
Гость
Фёдор К,

да ошибочкаа вышла сорри
...
Рейтинг: 0 / 0
18.05.2016, 18:50
| Ответить | Цитировать | Написать  
CSS Transition
    #39245398
hidendress
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hidendress
Гость
лучше всего мне кажеться js реализовывать такие вещи
...
Рейтинг: 0 / 0
28.05.2016, 11:20
| Ответить | Цитировать | Написать  
CSS Transition
    #39245617
jakkira
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jakkira
Гость
hidendressлучше всего мне кажеться js реализовывать такие вещи
мне вот очень интересно, а есть еще какие то варианты?
...
Рейтинг: 0 / 0
29.05.2016, 12:46
| Ответить | Цитировать | Написать  
CSS Transition
    #39245618
hidendress
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hidendress
Гость
ну еще можно попробовать какую ни будь cms по типу UMI-CMS, и добиваться результата с помощью плагинов
...
Рейтинг: 0 / 0
29.05.2016, 12:48
| Ответить | Цитировать | Написать  
15 сообщений из 15, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS Transition
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]