動畫添加和刪除塊中的類

Question

我想製作一個類的動畫添加和刪除。

在Google中找到有關過渡的信息，但由於某種原因，它無法正常工作。

當單擊塊上的按鈕時，將添加具有css樣式的類。在樣式中，如果屬性：afterter必須隨動畫出現並消失。 如何才能實現？

$('button.add').click(function() { 
 
    $('div.required').addClass('required-empty'); 
 
    setTimeout(function() { 
 
    $('div.required').removeClass('required-empty'); 
 
    }, 5000); 
 
});

.required-empty { 
 
    position: relative; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 

 
.required-empty:after { 
 
    position: absolute; 
 
    width: 11px; 
 
    height: 11px; 
 
    line-height: 12px; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    right: -18px; 
 
    top: 50%; 
 
    color: #fa6464; 
 
    content: "s"; 
 
    text-rendering: auto; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-transform: translateY(-50%); 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 

 
.required { 
 
    position: relative; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
    width: 100px; 
 
    height: 50px; 
 
    background: #333; 
 
    margin-left: 100px; 
 
} 
 

 
.required:before { 
 
    position: absolute; 
 
    width: 11px; 
 
    height: 11px; 
 
    line-height: 12px; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    left: -18px; 
 
    top: 50%; 
 
    color: #e0e0e3; 
 
    content: "R"; 
 
    text-rendering: auto; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-transform: translateY(-50%); 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 

 
.required.required-red:before { 
 
    color: #fa6464; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="required required-red"> 
 

 
</div> 
 
<button class="add">addClass</button>

Answer 1

$('button.add').click(function() { 
 
    $('div.required').addClass('required-empty'); 
 
    setTimeout(function() { 
 
    $('div.required').removeClass('required-empty'); 
 
    }, 5000); 
 
});

.required { 
 
    position: relative; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
    width: 100px; 
 
    height: 50px; 
 
    background: #333; 
 
    margin-left: 100px; 
 
} 
 

 
.required:before { 
 
    position: absolute; 
 
    width: 11px; 
 
    height: 11px; 
 
    line-height: 12px; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    left: -18px; 
 
    top: 50%; 
 
    color: #e0e0e3; 
 
    content: "R"; 
 
    text-rendering: auto; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-transform: translateY(-50%); 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 

 
.required.required-red:before { 
 
    color: #fa6464; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 

 
.required-empty { 
 
    position: relative; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 

 
.required-empty:before { 
 
    position: absolute; 
 
    width: 11px; 
 
    height: 11px; 
 
    line-height: 12px; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    right: -18px; 
 
    top: 50%; 
 
    color: #fa6464; 
 
    content: "s"; 
 
    text-rendering: auto; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-transform: translateY(-50%); 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="required required-red"> 
 

 
</div> 
 
<button class="add">addClass</button>

類訂單，你default狀態重疊empty類