Question

这是fiddle，下面是CSS代码（HTML只是一个SVG椭圆）。它适用于Chrome，Firefox和Opera，但在IE和Edge中不起作用。如何在IE和Edge中查看动画？

#my-circle {
  stroke: blue;
  stroke-dasharray: 1100;
  stroke-dashoffset: 500;
  -moz-animation: draw-first-shape 1s forwards 3;
  -webkit-animation: draw-first-shape 1s forwards 3;
  animation: draw-first-shape 1s forwards 3;
}

@-moz-keyframes draw-first-shape {
  from {
    stroke-dashoffset: 1100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes draw-first-shape {
  from {
    stroke-dashoffset: 1100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-first-shape {
  from {
    stroke-dashoffset: 1100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Answer 1

尽管MSDN说MS Edge的，stroke-dashoffset属性可以通过CSS动画和过渡进行动画处理，但 仍然没有出于某种原因，不能工作 。如果我们使用stroke-dasharray而不是stroke-dashoffset重新创建此动画，那么它会在Edge中按预期工作。

但是 仍然无法在IE11中运行 或更低，因为再次MSDN中所示，stroke-dasharray可以使用CSS动画制作动画，仅从MS Edge过渡。

修改后的动画仍可在最新版本的Chrome，Firefox和Opera中使用。

#my-circle {
  stroke: blue;
  stroke-dasharray: 1100;
  stroke-dashoffset: 0;
  animation: draw-first-shape 1s forwards 3;
}
@keyframes draw-first-shape {
  from {
    stroke-dasharray: 0, 1100;
  }
  to {
    stroke-dasharray: 1100, 1100;
  }
}

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300" viewBox="0 0 500.00001 300" id="svg2">
  <g id="layer1" transform="translate(0 -752.362)">
    <ellipse id="my-circle" cx="257.013" cy="907.735" rx="201.742" ry="111.465" fill="#fff" stroke="#007400" stroke-width="3" />
  </g>
</svg>

Answer 2

作为MS Edge的一种解决方法，您可以将stroke-width和stroke-dashoffset一起动画化@keyframes draw-first-shape { from { stroke-dashoffset: 1100; stroke-width: 3.03; } to { stroke-dashoffset: 0; stroke-width: 3; } }（对其值进行微小的变化）。例如，对于以下问题：

/**
* Update the order meta with field value
**/ 
add_action( 'woocommerce_checkout_update_order_meta', 
'my_custom_checkout_field_update_order_meta' );

function my_custom_checkout_field_update_order_meta( $order_id ) {
?>
<?php
if ( ! empty( $_POST['from_comments'] ) ) {
    update_post_meta( $order_id, 'FROM', sanitize_text_field( $_POST['from_comments'] 
 ) );
}   
}
/**
* Update the order meta with field value
**/ 
add_action( 'woocommerce_checkout_update_order_meta', 
'my_customs_checkout_field_update_order_meta' );
 function my_customs_checkout_field_update_order_meta( $order_id ) {
?>
<?php
if ( ! empty( $_POST['to_comments'] ) ) {
    update_post_meta( $order_id, 'TO', sanitize_text_field( $_POST['to_comments'] ) 
  );
   }    
   }
   /**
   * Display field value on the order edit page
   **/
   add_action( 'woocommerce_admin_order_data_after_billing_address', 
 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

 function my_custom_checkout_field_display_admin_order_meta($order){
?>
<?php
echo '<p><strong>'.__('FROM').':</strong> ' . get_post_meta( $order->id, 'FROM', true 
  ) . '</p>';
 echo '<p><strong>'.__('TO').':</strong> ' . get_post_meta( $order->id, 'TO', true ) 
 . '</p>';
  }
 /**
 * Add the field to the checkout
 */
 add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

 function my_custom_checkout_field( $checkout ) {
 ?>
 <?php
  echo '<div id="my_custom_checkout_field"><h2>' . __('TO ') . '</h2>';
  woocommerce_form_field( 'from_comments', array(
    'type'          => 'text',
    'class'         => array('my-field-class form-row-wide'),
    'placeholder'   => __('FROM'),
    ), $checkout->get_value( 'from_comments' ));

   woocommerce_form_field( 'to_comments', array(
    'type'          => 'text',
    'class'         => array('my-field-class form-row-wide'),
    'placeholder'   => __('TO'),
    ), $checkout->get_value( 'to_comments' ));
       echo '</div>';
        }

为什么这个CSS3动画在MS Edge或IE11中不起作用？

2 个答案: