Проблема с addEventListener ("transitionend", функция, правда) - PullRequest
Новая
       7

Проблема с addEventListener ("transitionend", функция, правда)

0 голосов
/ 05 июля 2011

Я пишу простую функцию для создания постоянного эффекта, используя css3 и javascript, но я не понимаю, как это работает должным образом. AddEventListener () не относится к параметру transitionend. Вот мой код.

Сначала я вызываю функцию: 

$('.tipsVi2, .tipsVi').mouseenter(function(){
            var e=$(this).attr('id');
            animacion(e);
            });

функция: 

function animacion(e) {
var el = updateTransition(e);
    el.addEventListener("transitionend", updateTransition(e), true);

}

и, наконец, функция updateTransition (): 

    function updateTransition(e) {  
var el = document.querySelector('#'+e);
  if (el.className=='tipsVi') {
    console.log('tipsVi2');
    el.className = "tipsVi2";
  } else {
    console.log('tipsVi');
    el = document.querySelector('div.tipsVi2');
    el.className = "tipsVi";
  }

  return el;
}

Как вы можете видеть, я добавил console.log, чтобы посмотреть, что происходит, и консоль выдает мне "tipsVi2", а затем "tipsVi" почти мгновенно, поэтому анимация не завершается.

Код CSS это: 

.tipsVi{
position:absolute;
display:none;
z-index:3000;
cursor:default;
-moz-transition-property:margin;
-moz-transition-duration: 500ms;
-webkit-transition-property: margin;
-webkit-transition-duration: 500ms;
-o-transition-property: margin;
-o-transition-duration: 500ms;
margin:0;}
.tipsVi2 {
position:absolute;
display:none;
z-index:3000;
cursor:default;
-moz-transition-property:margin;
-moz-transition-duration: 500ms;
-webkit-transition-property: margin;
-webkit-transition-duration: 500ms;
-o-transition-property: margin;
-o-transition-duration: 500ms;
margin:-5px 0 0 0;  }

1 Ответ

0 голосов
/ 06 июля 2011

ОК. Я решил проблему с изменением кода, я выбрал чистое решение CSS, хотя я использовал Javascript для повышения производительности.

Итак, сначала я изменил свой код CSS следующим образом: 

    .tipsVi{
    position:absolute;
    z-index:3000;
    cursor:default;
    display:none;
    color:#3d3d3d;
    font-size:30px;
}

 @-moz-keyframes slidein {
      from {
        margin-top:0;
      }



      50% {
          margin-top:-4px;
      }

      to {
        margin-top:0;
      }
    }

    @-webkit-keyframes slidein {
      from {
        margin-top:0;
      }

      50% {
          margin-top:-4px;
      }

      to {
        margin-top:0;
      }
    }

Ключевые кадры предлагают мне постоянную анимацию с циклом, чтобы мне было проще.Но я просто хотел показать анимацию, когда я нажимал кнопку, поэтому я сделал это: 

function tipsVi(){

    //Help activated, 
    if(misTips==1){
        misTips=0;
        $('.tipsVi').fadeIn(150, function(){
            var css={'position':'absolute',
                    'z-index':'3000',
                    'cursor':'default',
                    'color':'#3d3d3d',
                    'font-size':'30px',
                    '-webkit-animation-direction':'normal',
                    '-moz-animation-direction': 'normal',
                    '-webkit-animation-duration': '800ms',
                    '-moz-animation-duration': '800ms',
                    '-webkit-animation-iteration-count': 'infinite',
                    '-moz-animation-iteration-count': 'infinite',
                    '-webkit-animation-name': 'slidein',
                    '-moz-animation-name': 'slidein',
                    '-webkit-animation-timing-function': 'ease',
                    '-moz-animation-timing-function': 'ease'};
            $('.tipsVi').css(css);
            });
    }
    //Tips apagados
    else{
        console.log('desactivada');
        $('.tipsVi).fadeOut(150, function(){
            var css={'position':'absolute',
                    'z-index':'3000',
                    'cursor':'default',
                    'display':'none',
                    'color':'#3d3d3d',
                    'font-size':'30px'};
        $('.tipsVi').css(css);
            });
        misTips=1;  
    }
}

Это может показаться немного сложным, но довольно простым, кнопка вызывает мою tipsVi() функцию, подобную этой 

<button onClick="javascript: tipsVi()">Help</button>

функция имеет глобальную переменную с именем misTips, поэтому, когда флаг равен 0, css изменяет jQuery, поэтому она выглядит следующим образом: 

.tipsVi{
position:absolute;
z-index:3000;
cursor:default;
display:none;
color:#3d3d3d;
font-size:30px;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;

-webkit-animation-duration: 800ms;
-moz-animation-duration: 800ms;

-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;

-webkit-animation-name: slidein;
-moz-animation-name: slidein;

-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;

}

и вуаля, когда div создает эффект fadeIn, он начинает увеличиваться и уменьшаться, разумеется, загрузка процессора возрастает, поэтому, когда я снова нажимаю кнопку, чтобы скрыть div, я возвращаю css, чтобы уменьшить загрузку процессораи улучшить производительность.

Надеюсь, это поможет кому-то вроде меня:)

...