Форум

Zub · #1 (**permalink**) 17.01.2012, 14:16

Всем добрый день.
Пытаюсь сделать сабж, но дело то не очень идёт. На данный момент код имеет следующий вид(тестирую только в ФайрФоксе):

Код:

<!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 только осваиваю.

FINoM · #2 (**permalink**) 17.01.2012, 16:40

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

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

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

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

Спасибо.

P.S. код форматируют специальные теги [ js ] ... [/js], [ html ] ... [/html] и другие аналогичные, сам. http://javascript.ru/formatting

Zub · #3 (**permalink**) 18.01.2012, 11:50

Эх, если бы я знал где именно проблема...
Вчера удалось улучшить ситуацию, теперь практически всё работает, но когда блок плавно закрывается, он всё равно остаётся на экране, не смотря на то что конечная точка анимации имеет 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);

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

kalevka · #4 (**permalink**) 18.01.2012, 13:16

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

document.getElementById нагружает систему, используйте реже, т.е:

var element=document.getElementById('appear');
// загрузили переменную

// далее работаем с ней

melky · #5 (**permalink**) 18.01.2012, 16:25

Сообщение от 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. зайдите)

Zub · #6 (**permalink**) 19.01.2012, 14:10

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

т.о. получается что функция закрытия приобретает следующий вид:

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, Ещё раз спасибо большое. Пожалуй что проблему можно считать решённой!

Форум

Справочник

Discord чат

Курсы javascript