Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2012, 14:16
Zub Zub вне форума
Новичок на форуме
Отправить личное сообщение для Zub Посмотреть профиль Найти все сообщения от Zub
 
Регистрация: 22.12.2011
Сообщений: 5

Всплывающий блок посредством CSS анимации и JS
Всем добрый день.
Пытаюсь сделать сабж, но дело то не очень идёт. На данный момент код имеет следующий вид(тестирую только в ФайрФоксе):
Код:
<!DOCTYPE HTML>
<html>
	<head>
	<style type="text/css">

	.mshache{
			   display: none;
	-moz-animation-name: anumaciyoCollapse;
	-moz-animation-duration: 2000ms;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease-in-out;

	}

	/*<!--Ключевые кадры анимации--> */
	@-moz-keyframes anumaciyoAppear {                
	0%{
	-moz-transform: scale(0.1,0.1);
	-moz-opacity: 0;
	}
	100% {
	-moz-transform: scale(1,1);
	-moz-opacity: 1;
	}
	}

	@-moz-keyframes anumaciyoCollapse {                
	0% {
	-moz-transform: scale(1,1);
	-moz-opacity: 1;
	}
	100%{
	-moz-transform: scale(0.1,0.1);
	-moz-opacity: 0;
	}
	}

	a {
	   text-decoration:none;
	   color:#03508c;
	   font-weight:bold;
	   font-size:16px;
	}



	/*Стиль всплывающего окна */

	#appear {
		   position: absolute;
		   width:320px;
		   left: 35%;
		   top: 100px;
		   border:solid #666688 2px;
		   display: none;
		   z-index: 100;
		   overflow: hidden;
		   border-radius: 7px;	
		   background-color:#666699;
		   color:#fff;
		   text-align:center;
		   padding:10px;
		/*-moz-animation-name: anumaciyoAppear;
		  -moz-animation-duration: 2000ms;
		  -moz-animation-iteration-count: 1;
		  -moz-animation-timing-function: ease-in-out;
	*/
	}

	</style>
	<meta http-equiv="Content-Type" content="text/html;charset=cp-1251">
	<title>popa-p</title>
	<link rel="stylesheet" href="style.css" type="text/css">
	<script>
		function showWin(){
			document.getElementById('appear').style.display='block'; 
		}
		function collapseWin() {
			var element = document.getElementById('appear');
			element.className = "mshache";
		}
	</script>
	</head>
	<body>
		<a href="#" onclick="showWin();" title=" Поднимите веки ">Открыть нечто</a>
		<div id="appear" >
			Моржевание моржевеющих моржуванов моржуйски моржает моржа.
			<button type="button" onClick="collapseWin()" >X</button>
		</div>
	</body>
</html>
Проблем несколько:
1.Если раскомменить код анимации плавного появления, перестаёт срабатывать плавное закрытие.
2.После плавного закрытия, блок снова появляется во всей красе и фнукция закрытия уже не срабатывает более.

Подскажите как отладить данную штуку. JS только осваиваю.
Ответить с цитированием
  #2 (permalink)  
Старый 17.01.2012, 16:40
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Вы опубликовали очень много кода.

Пожалуйста, локализуйте проблему!

Выделите фрагмент кода, по которому есть вопрос и опубликуйте его отдельно.

И, по возможности, уберите из кода мусор, чтобы нам легче было сориентироваться и помочь решить вашу проблему.

Спасибо.

P.S. код форматируют специальные теги [ js ] ... [/js], [ html ] ... [/html] и другие аналогичные, сам. http://javascript.ru/formatting
__________________
"Matreshka is fucking awesome" © чувак с Reddit
Matreshka.js - Три возможности
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2012, 11:50
Zub Zub вне форума
Новичок на форуме
Отправить личное сообщение для Zub Посмотреть профиль Найти все сообщения от Zub
 
Регистрация: 22.12.2011
Сообщений: 5

Эх, если бы я знал где именно проблема...
Вчера удалось улучшить ситуацию, теперь практически всё работает, но когда блок плавно закрывается, он всё равно остаётся на экране, не смотря на то что конечная точка анимации имеет opacity: 0.
Код переформатировал и убрал по возможности лишнее.
Т.е. проблема сейчас вроде только одна осталась: по окончании анимации закрытия, блок уменьшается, но не исчезает.
.sgin{	  
		  -moz-animation-name: anumaciyoCollapse;
		  -moz-animation-duration: 2000ms;
		  -moz-animation-fill-mode: forwards;
	}
	.yavis{
		  -moz-animation-name: anumaciyoAppear;
		  -moz-animation-duration: 2000ms;
	}
	/*<!--Ключевые кадры анимации--> */
	@-moz-keyframes anumaciyoAppear {                
	0%{
	-moz-transform: scale(0.1,0.1);
	-moz-opacity: 0;
	}
	100% {
	-moz-transform: scale(1,1);
	-moz-opacity: 1;
	}
	}
	@-moz-keyframes anumaciyoCollapse {                
	0% {
	-moz-transform: scale(1,1);
	-moz-opacity: 1;
	}
	100%{
	-moz-transform: scale(0.05,0.05);
	-moz-opacity: 0;
	}
	}
	/*Стиль всплывающего окна */

	#appear {
		   position: absolute;
		   width:320px;
		   left: 35%;
		   top: 100px;
		   border:solid #666688 2px;
		   display: none;
		   z-index: 100;
		   background-color:#666699;
		   color:#fff;
		   text-align:center;
		   padding:10px;
	}

function showWin(){
			document.getElementById('appear').style.display='block'; 
			var element = document.getElementById('appear');
			element.className = "yavis";
		}
		function collapseWin() {
			var element = document.getElementById('appear');
			element.className = "sgin";
		}

<a href="#" onclick="showWin();">open menu</a>
		<div id="appear" >
			text
			<button type="button" onClick="collapseWin()" >X</button>
		</div>


Проблема конечно решается добавлением чего-то типа:
function displNone(){document.getElementById('appear').style.display='none';}
setTimeout(displNone,2000);

но это же ненормально...

Последний раз редактировалось Zub, 18.01.2012 в 12:43.
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2012, 13:16
Новичок на форуме
Отправить личное сообщение для kalevka Посмотреть профиль Найти все сообщения от kalevka
 
Регистрация: 17.01.2012
Сообщений: 2

function showWin(){
var element=document.getElementById('appear');
element.className = "yavis";
element.style.dispslay='block';
}


document.getElementById нагружает систему, используйте реже, т.е:
var element=document.getElementById('appear');
// загрузили переменную

// далее работаем с ней
Ответить с цитированием
  #5 (permalink)  
Старый 18.01.2012, 16:25
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Zub Посмотреть сообщение
Т.е. проблема сейчас вроде только одна осталась: по окончании анимации закрытия, блок уменьшается, но не исчезает
function showWin(){
			document.getElementById('appear').style.display='block'; 
			var element = document.getElementById('appear');
			element.className = "yavis";
		}
		function collapseWin() {
			var element = document.getElementById('appear');
			element.className = "sgin";
		}

<a href="#" onclick="showWin();">open menu</a>
		<div id="appear" >
			text
			<button type="button" onClick="collapseWin()" >X</button>
		</div>


Проблема конечно решается добавлением чего-то типа:
function displNone(){document.getElementById('appear').style.display='none';}
setTimeout(displNone,2000);

но это же ненормально...
да, это ненормально. Вы верно установили, где собака зарыта, но не знаете, как её выкопать.
Я за Вас код писать не стану, однако помогу советами :
  • Откройте для себя такие ресурсы, как MSDN и MDN
  • Вам необходимо скрывать (display=none) элемент после конца анимации. Делать это нужно по событию конца анимации, а не через время.
  • CSS не позволяет установить JS-обработчик события завершения CSS анимации.
  • Ответы вы найдёте в статье по CSS анимации на MDN (снизу ссылка на AnimationEvent. зайдите)
Ответить с цитированием
  #6 (permalink)  
Старый 19.01.2012, 14:10
Zub Zub вне форума
Новичок на форуме
Отправить личное сообщение для Zub Посмотреть профиль Найти все сообщения от Zub
 
Регистрация: 22.12.2011
Сообщений: 5

спасибо, почитаем про эти странные незнакомые буквы...

т.о. получается что функция закрытия приобретает следующий вид:
function collapseWin() {
  var element = document.getElementById('appear');
  element.className = "sgin";
  element.addEventListener("animationend",displNone,false)
  function displNone(){element.style.display='none';}
}

Только возникает другая проблема-слушатели плодятся, окно начинает исчезать и при окончании анимации появления. надо убирать слушателя. Не нашёл как это делать.
element.removeEventListener("animationend")
не сработало
А вот
element.removeEventListener("animationend", displNone)
работает так как надо.

melky, Ещё раз спасибо большое. Пожалуй что проблему можно считать решённой!

Последний раз редактировалось Zub, 19.01.2012 в 15:18.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как воспроизвести звук посредством JS на телефоне ? FreeDas Мобильный JavaScript 14 06.03.2013 14:52
Вставка CSS in JS igor777 Элементы интерфейса 4 03.04.2012 12:31
Всплывающий блок Zub Events/DOM/Window 2 23.12.2011 15:56
С помощью JS добавить к ссылкам картинку в CSS wlad2 Элементы интерфейса 7 16.10.2010 23:44
Вакансия: Front-end разработчик (HTML, CSS, JS, Ajax, jQuery) ivankov Работа 0 05.10.2010 19:00