Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS Transition / 15 сообщений из 15, страница 1 из 1
16.05.2016, 10:14
    #39236294
vdekameron
vdekameron
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS Transition
Добрый день уважаемые спецы. Написал на 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:45
    #39236322
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS Transition
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, 11:48
    #39236385
vdekameron
vdekameron
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS Transition
krvsa,

Это понятно, я тоже могу написать простейший код где все будет работать. Я про свой код...вот там не работает, вернее работает как то непонятно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.05.2016, 13:22
    #39236483
vdekameron
vdekameron
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS Transition
.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
    #39236486
vdekameron
vdekameron
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS Transition
Код: 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, 15:51
    #39236679
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS Transition
vdekameronя тоже могу написать простейший код где все будет работать. Я про свой код...вот там не работает, вернее работает как то непонятно.
Вот бери мой пример и показывай после чего у тебя перестает работать.
Только полный пример, как у меня, а не те огрызки, что ты приписал...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.05.2016, 16:05
    #39236703
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS Transition
vdekameron
Код: css
1.
2.
	display: none;
	opacity: 0.5;


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

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



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



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


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


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

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



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



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

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

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


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