CSS動畫劈扣到上點擊

Question

2個選項在HTML表單中，我有一個簡單的按鈕 - 非常相似，根據在這裏展示https://codepen.io/sebj54/pen/oxluI

.btn { 
    position: relative; 

    display: block; 
    margin: 30px auto; 
    padding: 0; 

    overflow: hidden; 

    border-width: 0; 
    outline: none; 
    border-radius: 2px; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6); 

    background-color: #2ecc71; 
    color: #ecf0f1; 

    transition: background-color .3s; 
} 

我想使用CSS（或JavaScript）中的那些動畫，點擊按鈕時，會在同一個div中生成2個其他按鈕，以顯示提供邏輯後續操作的2個選項。我怎樣才能做到這一點？任何意見轉換爲相同的建議也將有所幫助。

Answer 1

點擊添加活動監聽器。之後，您可以創建兩個新按鈕並放置它們而不是原始按鈕。一個很簡單的例子：

var btn = document.getElementById('clickBtn'); 
 
btn.addEventListener('click', function(el) { 
 
    var btn1 = document.createElement("button"); 
 
    var btn2 = document.createElement("button"); 
 
    var span1 = document.createElement("span"); 
 
    var span2 = document.createElement("span"); 
 
    span1.appendChild(document.createTextNode("btn1")); 
 
    span2.appendChild(document.createTextNode("btn2")); 
 
    btn1.appendChild(span1); 
 
    btn2.appendChild(span2); 
 
    btn1.className = "btn green"; 
 
    btn2.className = "btn orange"; 
 
    btn1.type = "button"; 
 
    btn2.type = "button"; 
 
    btn.parentNode.appendChild(btn1); 
 
    btn.parentNode.appendChild(btn2); 
 
    btn.parentNode.removeChild(btn); 
 
}, false)

.btn { 
 
    position: relative; 
 

 
    display: block; 
 
    margin: 30px auto; 
 
    padding: 0; 
 

 
    overflow: hidden; 
 

 
    border-width: 0; 
 
    outline: none; 
 
    border-radius: 2px; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6); 
 
    
 
    background-color: #2ecc71; 
 
    color: #ecf0f1; 
 
    
 
    transition: background-color .3s; 
 
} 
 

 
.btn:hover, .btn:focus { 
 
    background-color: #27ae60; 
 
} 
 

 
.btn > * { 
 
    position: relative; 
 
} 
 

 
.btn span { 
 
    display: block; 
 
    padding: 12px 24px; 
 
} 
 

 
.btn:before { 
 
    content: ""; 
 
    
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    
 
    display: block; 
 
    width: 0; 
 
    padding-top: 0; 
 
    
 
    border-radius: 100%; 
 
    
 
    background-color: rgba(236, 240, 241, .3); 
 
    
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.btn:active:before { 
 
    width: 120%; 
 
    padding-top: 120%; 
 
    
 
    transition: width .2s ease-out, padding-top .2s ease-out; 
 
} 
 

 
/* Styles, not important */ 
 
*, *:before, *:after { 
 
    box-sizing: border-box; 
 
} 
 

 
html { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    
 
    background-color: #ecf0f1; 
 
    color: #34495e; 
 
    font-family: Trebuchet, Arial, sans-serif; 
 
    text-align: center; 
 
} 
 

 
h2 { 
 
    font-weight: normal; 
 
} 
 

 
.btn.orange { 
 
    background-color: #e67e22; 
 
} 
 

 
.btn.orange:hover, .btn.orange:focus { 
 
    background-color: #d35400; 
 
} 
 

 
.btn.red { 
 
    background-color: #e74c3c; 
 
} 
 

 
.btn.red:hover, .btn.red:focus { 
 
    background-color: #c0392b; 
 
}

<div> 
 
    <button class="btn red" type="button" id="clickBtn"><span>Extra-long button to let you appreciate the effect.</span></button> 
 
</div>