Canvas ChartJS не изменяет размер после использования ключевых кадров анимации - ошибка? - PullRequest
Новая
       12

Canvas ChartJS не изменяет размер после использования ключевых кадров анимации - ошибка?

0 голосов
/ 22 ноября 2018 
<div class="row">
    <div class="col-md-6 graph-column">
        <div *ngIf="graphsLoaded">
            <span class="graph-title">Players this month</span>
            <mat-divider class="graph-divider"></mat-divider>            
        </div>
        <div class="graph-content">
            <canvas id="canvas-players">{{ players }}</canvas>
        </div>
    </div>
    <div class="col-md-6 graph-column">
            <div *ngIf="graphsLoaded">
                <span class="graph-title">Server Uptime</span>
                <mat-divider class="graph-divider"></mat-divider>            
            </div>
            <div class="graph-content">
                <canvas id="canvas-status">{{ status }}</canvas>
            </div>
    </div>
</div>

График загружается нормально, но что происходит, когда вы хотите добавить эффект постепенного появления при загрузке графика?

Вы делаете следующее: 

#canvas-players {
    animation: anim 1s;
}

@keyframes anim {
    0% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

Теперь, когдаВы загружаете страницу, один из ваших графиков должен загружаться с эффектом постепенного появления.ОК, это так!

img

Но теперь, когда вы изменяете размер экрана, происходит следующее:

img2

Как видите,первый график сохраняет свой первоначальный размер, что неверно, а другой график корректен, изменяя размеры ..

Я попытался выяснить, что не так, и похоже, что он не меняет width и height атрибуты после использования анимации.

Одна интересная вещь: если я отключу анимацию из проверки и включу ее снова, она будет работать очень хорошо!

Если я установлю width: 100% !important; и height: auto; на canvas, он изменит свой размер, но весь холст будет в пикселях в соответствии с размером.

Мне интересно, если это ошибка chartJs или CSSошибка?

...