按一下按鈕即可開始半圓形動畫

Question

我正試圖讓我的圓形裝載程式運作。但是沒有找到如何讓點擊時試圖運行動畫按鈕。

任何想法？

<div class="chart-skills"> 
    <div class="liElem" id="eins"></div> 
</div> 

<div class="chart-skills" id="bottom"> 
    <div class="liElem" id="zwei"></div> 
</div> 

<button onclick="myFunction()">Try it</button> 

下面的代碼：https://jsfiddle.net/pzc41skn/

Answer 1

這裏是你如何能在按鈕的點擊實現的動畫：

function myFunction() { 
 
    $('.liElem').remove(); 
 
    $(".chart-skills").html('<div class="liElem" id="eins"></div>'); 
 
}

body { 
 
    font: normal 16px/1.5 'Roboto', sans-serif; 
 
    padding: 130px 0 0 0; 
 
    background: #f1f1f1; 
 
} 
 

 

 
/* RESET STYLES 
 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
 

 
.chart-skills { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
.chart-skills *, 
 
.chart-skills::before { 
 
    box-sizing: border-box; 
 
} 
 

 

 
/* CHART-SKILLS STYLES 
 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
 

 
.chart-skills { 
 
    position: relative; 
 
    width: 350px; 
 
    height: 175px; 
 
    overflow: hidden; 
 
} 
 

 
.chart-skills::before, 
 
.chart-skills::after { 
 
    position: absolute; 
 
} 
 

 
.chart-skills::before { 
 
    content: ''; 
 
    width: inherit; 
 
    height: inherit; 
 
    border: 45px solid rgba(211, 211, 211, .3); 
 
    border-bottom: none; 
 
    border-top-left-radius: 175px; 
 
    border-top-right-radius: 175px; 
 
} 
 

 
.chart-skills::after { 
 
    content: ''; 
 
    left: 50%; 
 
    bottom: 10px; 
 
    transform: translateX(-50%); 
 
    font-size: 1.1rem; 
 
    font-weight: bold; 
 
    color: cadetblue; 
 
} 
 

 
.chart-skills .liElem { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    width: inherit; 
 
    height: inherit; 
 
    border: 45px solid; 
 
    border-top: none; 
 
    border-bottom-left-radius: 175px; 
 
    border-bottom-right-radius: 175px; 
 
    transform-origin: 50% 0; 
 
    transform-style: preserve-3d; 
 
    backface-visibility: hidden; 
 
    animation-fill-mode: forwards; 
 
    animation-duration: .4s; 
 
    animation-timing-function: linear; 
 
} 
 

 
.chart-skills #eins { 
 
    z-index: 4; 
 
    border-color: green; 
 
    animation-name: rotate-one; 
 
    animation-delay: .4s; 
 
} 
 

 
.chart-skills #zwei { 
 
    z-index: 4; 
 
    border-color: green; 
 
    animation-name: rotate-one; 
 
    animation-delay: .8s; 
 
} 
 

 

 

 
@keyframes rotate-one { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(180deg); 
 
    /** 
 
    * 32% => 57.6deg 
 
    * 57.6 + 21.6 => 79.2deg 
 
    */ 
 
    } 
 
} 
 

 
#bottom { 
 
    transform: scale(-1); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="chart-skills"> 
 
    <div class="liElem" id="eins"></div> 
 

 
</div> 
 

 
<div class="chart-skills" id="bottom"> 
 
    <div class="liElem" id="zwei"></div> 
 
</div> 
 

 
<button onclick="myFunction()">Try it</button>