40％から60％までのCSS円グラフアニメーション

Question

CSSでダイナミックな円グラフを作成しようとしましたが、50％未満から50％以上にアニメーション化したい、ここで

は（私は、スタックのツールでSCSSを使用する方法を見つけることができませんでした）codepenです：http://codepen.io/mbrillaud/pen/NNgqYE

は、この影響を回避するためにそこにトリックか？

HTML

<div class="wrapper"> 
    <div class="pie percent-10" id="pie"></div> 
    <div class="border"></div> 
</div> 
<div class="buttons"> 
    <button data-value="10">10%</button> 
    <button data-value="20">20%</button> 
    <button data-value="30">30%</button> 
    <button data-value="40">40%</button> 
    <button data-value="50">50%</button> 
    <button data-value="60">60%</button> 
    <button data-value="70">70%</button> 
    <button data-value="80">80%</button> 
    <button data-value="90">90%</button> 
    <button data-value="100">100%</button> 
</div> 

CSS

@import 'compass'; 
body { 
    background-color: #2c333b; 
} 
.wrapper { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100px; 
    @include transform(translate(-50%, -50%)); 
    .pie, 
    .border { 
    box-sizing: border-box; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    } 
    .pie { 
    background-color: #FDDED9; 
    background-image: linear-gradient(to right, transparent 50%, #ff4081 0); 
    &::before { 
     content: ''; 
     display: block; 
     top: 0; 
     left: 50%; 
     width: 50%; 
     margin-left: 50%; 
     height: 100%; 
     border-radius: 0 100% 100% 0/50%; 
     background-color: inherit; 
     transform-origin: left; 
     transition: transform .2s linear; 
    } 
    &.percent-10::before { 
     transform: rotate(.1turn); 
    } 
    &.percent-20::before { 
     transform: rotate(.2turn); 
    } 
    &.percent-30::before { 
     transform: rotate(.3turn); 
    } 
    &.percent-40::before { 
     transform: rotate(.4turn); 
    } 
    &.percent-50::before { 
     transform: rotate(.5turn); 
    } 
    &.percent-60::before { 
     transform: rotate(.1turn); 
     background-color: #ff4081; 
    } 
    &.percent-70::before { 
     transform: rotate(.2turn); 
     background-color: #ff4081; 
    } 
    &.percent-80::before { 
     transform: rotate(.3turn); 
     background-color: #ff4081; 
    } 
    &.percent-90::before { 
     transform: rotate(.4turn); 
     background-color: #ff4081; 
    } 
    &.percent-100::before { 
     transform: rotate(.5turn); 
     background-color: #ff4081; 
     } 

    } 
    .border { 
    border: 5px solid #FDDED9 
    } 
} 

JS

$(document).ready(function() { 

    var $pie = $('#pie'), 
     className; 

    $('button').on('click', function() { 
    className = $pie.attr('class').match(/percent[\w-]*\b/); 
    $pie 
     .removeClass(className[0]) 
     .addClass('percent-' + $(this).data('value')); 
    }); 
}); 

Answer 1

あなたが使っている方法は、静的な円グラフに最適ですが、うまく50の間でアニメーション化されることはありません％マーク。私は個人的にSVGルートに行くことを好みます。 https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/

それは基本的には円そのものと同じくらい広いstrokeを適用<circle>を作成するまで来て、CSSでstroke-dasharrayプロパティを操作：

リー・ベルーはこのようなものをどのように扱うかについての良い作品を書きました。

HTML

<svg width="100" height="100" class="svg"> 
    <circle r="50" cx="50" cy="50" class="circle"/> 
    <circle id="pie" r="22.5" cx="50" cy="50" class="circle percent-10"/> 
</svg> 

SCSS

// circumference = 2π * radius 
// so in this case circumference = 2π × 22.5 ≈ 141): 
$circumference: 141; 

.svg { 

    /* Appearance */ 
    transform: rotate(-90deg); 
} 

.circle { 

    /* Appearance */ 
    fill: #fdded9; 
} 

#pie { 

    /* Appearance */ 
    stroke: #ff4081; 
    stroke-dasharray: 0 $circumference; 
    stroke-width: 45; 
    transition: stroke-dasharray .2s linear; 

    &.percent-10 { stroke-dasharray: ($circumference * 0.1) $circumference; } 
    &.percent-20 { stroke-dasharray: ($circumference * 0.2) $circumference; } 
    &.percent-30 { stroke-dasharray: ($circumference * 0.3) $circumference; } 
    &.percent-40 { stroke-dasharray: ($circumference * 0.4) $circumference; } 
    &.percent-50 { stroke-dasharray: ($circumference * 0.5) $circumference; } 
    &.percent-60 { stroke-dasharray: ($circumference * 0.6) $circumference; } 
    &.percent-70 { stroke-dasharray: ($circumference * 0.7) $circumference; } 
    &.percent-80 { stroke-dasharray: ($circumference * 0.8) $circumference; } 
    &.percent-90 { stroke-dasharray: ($circumference * 0.9) $circumference; } 
    &.percent-100 { stroke-dasharray: ($circumference * 1) $circumference; } 
} 

あなたのコードのための私の唯一の懸念は今、これは非常にスケーラブルではないということです。私は、data-attributeに基づいてJavaScriptを使ってstroke-dasharrayを動的に設定する方がよいかもしれないと思います。

はJavaScript

$('button').on('click', function(){ 

    var CIRCUMFERENCE = 141, 
     percentage = Number($(this).data('value')), 
     factor = percentage/100, 
     strokeDashArray = (CIRCUMFERENCE * factor) + ' ' + CIRCUMFERENCE); 

    $pie.css('stroke-dasharray', strokeDashArray; 
}); 

そして、ここであなたがアクションでそれを見ることができますので、あなたの元のコードに基づいてCodePenです： http://codepen.io/rvmook/pen/LNLGoE