アニメーション：Jqueryを使用した後

Question

私はulの:afterをアニメーション化できません。ここでは、CSSのコードは次のとおりです。

#slider .mypagination ul::after 
{ 
    content: ""; 
    width:25%; 
    bottom: 0; 
    left:0; 
    position: absolute; 
    border-top:1px solid #7accc8; 
    transition:0.3s; 
} 

、これは、クリックが働いている私のjqueryのコード

$(".mypagination li").click(function(){ 
    $("#slider .mypagination ul:after").css({ 
     "left":"100px" 
    },300); 
}) 

です。私はconsole.log("click")を使ってテストします。 誰でも私を助けることができます...

Answer 1

アクセスはできません：アフター、それはDOMの一部ではないので。したがって、JavaScriptではアクセスできません。

これには回避策があります。幅jqueryをアニメートする要素にクラスを追加します。

$(".mypagination li").click(function(){ 
    $("#slider .mypagination ul").addClass("animationClass") 
} 

次に、CSSでアニメーションします。

#slider .mypagination ul:after { 
    left: 0; 
    transition: all 300ms ease; 
} 

#slider .mypagination ul.animationClass:after { 
    left: 100px; 
} 

このコードが実際に動作するかどうかは確認していませんが、試してみてください。