Question

我已经设置了scenario in jsFiddle。我的解决方案几乎可以工作，但它只会淡化旧块，弹出新块而不是淡入。

通过首先转换不透明度，检测其完成情况，然后设置display: none;，我避免了通常尝试设置display: none;动画的陷阱。它有助于淡出......

HTML：

<body>
  <p>
    Mouse over to translate:
  </p>
  <blockquote class="untranslated">
    <p>Mae govannen</p>
  </blockquote>
  <blockquote class="translated disabled fade">
    <p>Well met</p>
  </blockquote>
</body>

CSS：

.disabled {
  display: none;
}

.fade {
  opacity: 0 !important;
}

.untranslated,
.translated {
  opacity: 1;
  transition: opacity 0.25s;
}

JS：

$(function($) {

  function whichTransitionEvent() {
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition': 'transitionend',
      'OTransition': 'oTransitionEnd',
      'MozTransition': 'transitionend',
      'WebkitTransition': 'webkitTransitionEnd'
    }

    for (t in transitions) {
      if (el.style[t] !== undefined) {
        return transitions[t];
      }
    }
  }

  var transitionEnd = whichTransitionEvent();
  var untranslated = $('.untranslated');
  var translated = $('.translated');

  untranslated.bind(transitionEnd, untranslatedFaded);
  translated.bind(transitionEnd, translatedFaded);

  untranslated.mouseenter(
    function() {
      $(this).addClass('fade')
    }
  )

  translated.mouseleave(
    function() {
      $(this).addClass('fade')
    }
  )

  function untranslatedFaded() {
    untranslated.addClass('disabled'),
      translated.removeClass('disabled'),
      translated.removeClass('fade')
  }

  function translatedFaded() {
    translated.addClass('disabled'),
      untranslated.removeClass('disabled'),
      untranslated.removeClass('fade')
  }

});

任何让它适当淡入淡出的想法？最好不要大幅改变方法。

JS / CSS淡出并禁用一个块，然后启用并淡入另一个块，正在逐渐消失但是弹出

0 个答案: