Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Всплывающий блок посредством CSS анимации и JS (https://javascript.ru/forum/dom-window/24865-vsplyvayushhijj-blok-posredstvom-css-animacii-i-js.html)

Zub 17.01.2012 14:16
Всплывающий блок посредством 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 только осваиваю.

FINoM 17.01.2012 16:40
Вы опубликовали очень много кода.

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

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

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

Спасибо.

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

Zub 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 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 18.01.2012 16:25
Цитата:
Сообщение от Zub (Сообщение 151200)
Т.е. проблема сейчас вроде только одна осталась: по окончании анимации закрытия, блок уменьшается, но не исчезает
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 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, Ещё раз спасибо большое. Пожалуй что проблему можно считать решённой!


Часовой пояс GMT +3, время: 17:30.