ブロック内でのクラスのアニメーションの追加と削除

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