Question

我有一个svg

<div>

我将其用作页面转换以覆盖页面更改之间的屏幕。

<svg class="svg_el" viewbox="0 0 100 100" preserveaspectratio="none">
  <path class="overlay_path">
    <animate attributeName="d" values="M 0 0 V 0 C 50 0 50 0 100 0 V 0 H 0;                         M 0 25 V 25 C 50 15 50 60 100 50 V 0 H 0;                         M 0 50 V 50 C 50 50 50 85 100 80 V 0 H 0;                         M 0 100 V 100 C 50 100 50 100 100 100 V 0 H 0" dur="0.4s" fill="freeze" repeatCount="1"></animate>
<animate attributeName="d" values="M 0 0 C 50 0 50 0 100 0 V 100 H 0;                         M 0 25 C 50 15 50 60 100 50 V 100 H 0;                         M 0 50 C 50 50 50 85 100 80 V 100 H 0;                         M 0 100 C 50 100 50 100 100 100 V 100 H 0" dur="0.4s" begin="reveal.begin+0.2s" fill="freeze" repeatCount="1"></animate>
  </path>
  <path class="overlay_path">
    <animate attributeName="d" values="M 0 0 V 0 C 50 0 50 0 100 0 V 0 H 0;                         M 0 25 V 25 C 50 15 50 60 100 50 V 0 H 0;                         M 0 50 V 50 C 50 50 50 85 100 80 V 0 H 0;                         M 0 100 V 100 C 50 100 50 100 100 100 V 0 H 0" dur="0.4s" begin="0.1s" fill="freeze" repeatCount="1"></animate>
    <animate attributeName="d" values="M 0 0 C 50 0 50 0 100 0 V 100 H 0;                         M 0 25 C 50 15 50 60 100 50 V 100 H 0;                         M 0 50 C 50 50 50 85 100 80 V 100 H 0;                         M 0 100 C 50 100 50 100 100 100 V 100 H 0" dur="0.4s" begin="reveal.begin+0.1s" fill="freeze" repeatCount="1"></animate>
  </path>
  <path class="overlay_path">
    <animate attributeName="d" values="M 0 0 V 0 C 50 0 50 0 100 0 V 0 H 0;                         M 0 25 V 25 C 50 15 50 60 100 50 V 0 H 0;                         M 0 50 V 50 C 50 50 50 85 100 80 V 0 H 0;                         M 0 100 V 100 C 50 100 50 100 100 100 V 0 H 0" dur="0.4s" begin="0.2s" fill="freeze" repeatCount="1"></animate>
    <animate id="reveal" attributeName="d" values="M 0 0 C 50 0 50 0 100 0 V 100 H 0;                         M 0 25 C 50 15 50 60 100 50 V 100 H 0;                         M 0 50 C 50 50 50 85 100 80 V 100 H 0;                         M 0 100 C 50 100 50 100 100 100 V 100 H 0" dur="0.4s" begin="indefinite" fill="freeze" repeatCount="1"></animate>
  </path>
</svg>

在第一次加载（刷新页面后）时，动画不会发生，它只是跳到其终点而中间没有任何动画。在Chrome上不会发生这种情况。这是我应用的CSS

function waves2(href) {
  $('.the_box').removeClass('loaded');
  var svgLoad = $.Deferred(),
    sliderLoad = $.Deferred();
  // first animations start immediatly after svg load
  $('.ccs').load('/wordpress/wp-content/themes/Tsunami-Waves-PHP/img/waves3.svg', svgLoad.resolve);
  $('.the_box').load(href + ' .slider-transition', sliderLoad.resolve);
  // wait for both load events
  $.when(svgLoad, sliderLoad).then(function() {
    var svgDoc = $('.ccs svg');
    // delay start time of second animations if load is earlier than 0.53s
    var startTime = Math.max(0.53, svgDoc[0].getCurrentTime());
    var reveal = $('#reveal');
    // link DOM change and video play to animation beginEvent
    reveal.on('beginEvent', function() {
      $('.the_box').siblings('.slider-transition').html($('.the_box').html());
      $('.slider-transition').children('.slider-transition').unwrap();
  $('.fixedmenu, fixedmenubg').removeClass('active');
  $('.hamburger').removeClass('is-active');
      $('video').trigger('play');
    }); reveal[0].beginElementAt(startTime); $(this).addClass('loaded'); $('.woocommerce-product-gallery').each(function() {
      $(this).wc_product_gallery();
    }); slideShowInit(); initParalax();
  });
}

我使用的浏览器是适用于Ubuntu的Firefox Quantum 60.0.2（64位）

SVG不会为首次加载Firefox设置动画

0 个答案: