Question

我一直试图为按钮重新创建Google Ripple效果。你可以看到它：here

适用于Chrome，但仅适用于Chrome。我似乎无法弄明白为什么。

我正在制作这样的波纹：点击后，在按钮内创建一个svg。使用鼠标坐标将其放置在正确的位置。然后它是动画槽css关键帧动画，动画圆半径（r =＆＃34; *＆＃34;）。

css：

body .custom-container .btn-custom .ripple-svg circle {
   opacity: 0;
   transform: traslateZ(0);
   -webkit-animation: flowAnimation 1s;
   -moz-animation: flowAnimation 1s;
   -o-animation: flowAnimation 1s;
   animation: flowAnimation 1s;
}

@-webkit-keyframes flowAnimation {
  0% {
    r: 5;
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.2;
  }
  90% {
    r: 300;
    opacity: 0;
  }
  100% {
    r: 5;
    opacity: 0;
  }
}

@-moz-keyframes flowAnimation {
  0% {
    r: 5;
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.2;
  }
  90% {
    r: 300;
    opacity: 0;
  }
  100% {
    r: 5;
    opacity: 0;
  }
}

@-o-keyframes flowAnimation {
  0% {
    r: 5;
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.2;
  }
  90% {
    r: 300;
    opacity: 0;
  }
  100% {
    r: 5;
    opacity: 0;
  }
}

@keyframes flowAnimation {
  0% {
    r: 5;
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.2;
  }
  90% {
    r: 300;
    opacity: 0;
  }
  100% {
    r: 5;
    opacity: 0;
  }
}

JS：

        // Mouse coordinates in button
        var MousePosX
        var MousePosY
        var offset = $("#flow-button").offset();

        // Set coordinates on mouse move
        $('#flow-button').on( "mousemove", function( event ) {
            MousePosX = ( event.pageX - offset.left);
            MousePosY = ( event.pageY - offset.top + 15);
        });

        // Ripple effect
        $('#flow-button').on("click", function(){
            // Append svg circle on each click
            $('#flow-button').append('<svg class="ripple-svg" height="100%" width="100%"><circle r="10" fill="black" /></svg>');

            // Append is following mouse coordinates
            $('.ripple-svg circle').css({
                cx: MousePosX,
                cy: MousePosY
            });

            // On multiple clicks delete all but the last one
            if ($('.ripple-svg').length > 2) {
                $('.ripple-svg:not(:last-child)').remove();
            }

        });

任何人都有任何想法？

Answer 1

在SVG 1.1中，radius（r）是属性而不是CSS属性。在SVG 2中，建议大多数属性应该成为CSS属性。

SMIL可以为属性和CSS属性设置动画，但CSS动画只能为CSS属性设置动画。

Chrome已实施SVG 2规范的这一部分（以了解它的可行性）。没有其他UA已经这样做了，但将来任何一个都可以这样做。

SVG关键帧不能在Firefox / Safari中设置半径和坐标的动画

1 个答案: