CSS動畫是不是住

2016-12-31 66 views 0 likes

我有了一個輸入字段和「下一步」按鈕的頁面。當用戶點擊下一個時，我想縮小輸入字段並刪除「下一個」按鈕。我主要在Bootply中看到它的工作。我的CSS動畫如下所示：CSS動畫是不是住

.default { 
     transition: all 1.0s ease; 
    } 

    .exit { 
     padding-left:5rem; 
     padding-right:5rem; 
    } 

    .remove-button { 
     animation: animate-remove-button 1.0s; 
    } 

    @keyframes animate-remove-button { 
     from { 
      transform:scaleX(1.0); 
      opacity: 1.0; 
     } 

     to { 
      transform:scaleX(0); 
      opacity: 0; 
     } 
    }

動畫運行。但是，動畫完成後，該按鈕會重新出現。另外，我基本上希望按鈕的寬度一直縮小到0，以便文本字段增長。但是，正如您在Bootply中看到的那樣，這並不是真的發生，儘管它看起來像是這樣。

我錯過了什麼？

來源

2016-12-31 user687554