如何在內容後對::進行動畫製作？

Question

在下面的代碼中，我試圖將動畫（旋轉）應用於我的::after內容，但其中包含多個行爲。

• 其旋轉，但在我local browser

• 閃爍所有其他內容（在旋轉過程）它不工作的code snippet

  我怎樣才能解決這個問題？

我試圖通過放入@ -webkit，@ - moz，@ - o來支持所有瀏覽器的動畫，但這對我沒有幫助。

var e = document.getElementsByClassName("nav-bar"); 
 
for(i = 0;i < e.length; i++){ 
 
    e[i].addEventListener("click",function(elem){ 
 
     var el = elem.currentTarget; 
 
      var value= el.id; 
 
      var title_total_length = value.length; 
 
      var const_length = "-navbar".length; 
 
      var title_length = title_total_length - const_length; 
 
      var current_menu_title = value.substring(0,title_length); 
 
      if(document.getElementById(current_menu_title).className === "ttl ttl-clck"){ 
 
       document.getElementById(current_menu_title).classList.remove("ttl-clck"); 
 
      alert("if"); 
 
      }else{ 
 
       document.getElementById(current_menu_title).classList.add("ttl-clck"); 
 
      alert("else"); 
 
      } 
 
    }); 
 
}

ul,li{ 
 
    list-style:none; 
 
    } 
 
.nav-bar > ul{ 
 
    display:none; 
 
    } 
 
.ttl::after{ 
 
    
 
    font-weight: 800; 
 
    content: "\203A"; 
 
    font-size: 25px; 
 
    margin-top: -10px; 
 
    /*transition:linear .5s;*/ 
 
    color:black; 
 
    animation: spin .5s linear 1; 
 
    } 
 
.ttl{ 
 
    cursor:pointer; 
 
    } 
 
.ttl-clck::after{ 
 
/* transition:linear .5s; 
 
    transform: rotate(90deg);*/ 
 
    color:green; 
 
    animation: spin .5s linear 1; 
 
} 
 

 
@-webkit-keyframes spin{ 
 
    0%{ 
 
    transform: rotate(0deg); 
 
    } 
 
    50%{ 
 
     transform: rotate(45deg); 
 
    } 
 
    100%{ 
 
     transform: rotate(90deg); 
 
    } 
 
} 
 
@-moz-keyframes spin{ 
 
    0%{ 
 
    transform: rotate(0deg); 
 
    } 
 
    50%{ 
 
     transform: rotate(45deg); 
 
    } 
 
    100%{ 
 
     transform: rotate(90deg); 
 
    } 
 
} 
 
@-o-keyframes spin{ 
 
    0%{ 
 
    transform: rotate(0deg); 
 
    } 
 
    50%{ 
 
     transform: rotate(45deg); 
 
    } 
 
    100%{ 
 
     transform: rotate(90deg); 
 
    } 
 
} 
 

 

 

 
@keyframes spin{ 
 
    0%{ 
 
    transform: rotate(0deg); 
 
    } 
 
    50%{ 
 
     transform: rotate(45deg); 
 
    } 
 
    100%{ 
 
     transform: rotate(90deg); 
 
    } 
 
}

<ul> 
 
    <li id="title1-navbar" class="nav-bar"> 
 
    <a> 
 
     <span id="title1" class="ttl">menu-title1 
 
     </span> 
 
    </a> 
 
     <ul> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     </ul> 
 
    </li> 
 
    <li id="title1-navbar" class="nav-bar"> 
 
    <a> 
 
     <span id="title1" class="ttl">menu-title2 
 
     </span> 
 
    </a> 
 
     <ul> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     </ul> 
 
    </li> 
 
    <li id="title1-navbar" class="nav-bar"> 
 
    <a> 
 
     <span id="title1" class="ttl">menu-title3 
 
     </span> 
 
    </a> 
 
     <ul> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     </ul> 
 
    </li>

Answer 1

您需要添加下面的CSS屬性

.ttl::after{ 
    display: inline-block; 
    ... 
} 
.ttl-clck::after{ 
display: inline-block; 
color:green; 
animation: spin .5s linear 1 forwards; 
} 

下面是工作代碼

var e = document.getElementsByClassName("nav-bar"); 
 
for(i = 0;i < e.length; i++){ 
 
    e[i].addEventListener("click",function(elem){ 
 
     var el = elem.currentTarget; 
 
      var value= el.id; 
 
      var title_total_length = value.length; 
 
      var const_length = "-navbar".length; 
 
      var title_length = title_total_length - const_length; 
 
      var current_menu_title = value.substring(0,title_length); 
 
      if(document.getElementById(current_menu_title).className === "ttl ttl-clck"){ 
 
       document.getElementById(current_menu_title).classList.remove("ttl-clck"); 
 
      
 
      }else{ 
 
       document.getElementById(current_menu_title).classList.add("ttl-clck"); 
 
      
 
      } 
 
    }); 
 
}

ul,li{ 
 
    list-style:none; 
 
    } 
 
.nav-bar > ul{ 
 
    display:none; 
 
    } 
 
.ttl::after{ 
 
    display: inline-block; 
 
    font-weight: 800; 
 
    content: "\203A"; 
 
    font-size: 25px; 
 
    margin-top: -10px; 
 
    /*transition:linear .5s;*/ 
 
    color:black; 
 
    
 
    } 
 
.ttl{ 
 
    cursor:pointer; 
 
    } 
 
.ttl-clck::after{ 
 
/* transition:linear .5s; 
 
    transform: rotate(90deg);*/ 
 
    display: inline-block; 
 
    color:green; 
 
    animation: spin .5s linear 1 forwards; 
 
} 
 

 
@-webkit-keyframes spin{ 
 
    0%{ 
 
    transform: rotate(0deg); 
 
    } 
 
    50%{ 
 
     transform: rotate(45deg); 
 
    } 
 
    100%{ 
 
     transform: rotate(90deg); 
 
    } 
 
} 
 
@-moz-keyframes spin{ 
 
    0%{ 
 
    transform: rotate(0deg); 
 
    } 
 
    50%{ 
 
     transform: rotate(45deg); 
 
    } 
 
    100%{ 
 
     transform: rotate(90deg); 
 
    } 
 
} 
 
@-o-keyframes spin{ 
 
    0%{ 
 
    transform: rotate(0deg); 
 
    } 
 
    50%{ 
 
     transform: rotate(45deg); 
 
    } 
 
    100%{ 
 
     transform: rotate(90deg); 
 
    } 
 
} 
 

 

 

 
@keyframes spin{ 
 
    0%{ 
 
    transform: rotate(0deg); 
 
    } 
 
    50%{ 
 
     transform: rotate(45deg); 
 
    } 
 
    100%{ 
 
     transform: rotate(90deg); 
 
    } 
 
}

<ul> 
 
    <li id="title1-navbar" class="nav-bar"> 
 
    <a> 
 
     <span id="title1" class="ttl">menu-title1 
 
     </span> 
 
    </a> 
 
     <ul> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     </ul> 
 
    </li> 
 
    <li id="title2-navbar" class="nav-bar"> 
 
    <a> 
 
     <span id="title2" class="ttl">menu-title2 
 
     </span> 
 
    </a> 
 
     <ul> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     </ul> 
 
    </li> 
 
    <li id="title3-navbar" class="nav-bar"> 
 
    <a> 
 
     <span id="title3" class="ttl">menu-title3 
 
     </span> 
 
    </a> 
 
     <ul> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     </ul> 
 
    </li>

Answer 2

當您將添加顯示內嵌塊或塊然後您的CSS動畫將工作。試試這個片段沒有關鍵幀。

希望這會有所幫助。

var e = document.getElementsByClassName("nav-bar"); 
 
for(i = 0;i < e.length; i++){ 
 
    e[i].addEventListener("click",function(elem){ 
 
    var el = elem.currentTarget; 
 
      var value= el.id; 
 
      var title_total_length = value.length; 
 
      var const_length = "-navbar".length; 
 
      var title_length = title_total_length - const_length; 
 
      var current_menu_title = value.substring(0,title_length); 
 
     if(document.getElementById(current_menu_title).className ==="ttl ttl-clck"){ 
 
      document.getElementById(current_menu_title).classList.remove("ttl-clck"); 
 
      //alert("if"); 
 
     }else{ 
 
      document.getElementById(current_menu_title).classList.add("ttl-clck"); 
 
      //alert("else"); 
 
     } 
 
    }); 
 
}

ul,li{list-style:none;} 
 
.nav-bar > ul{ 
 
    display:none; 
 
} 
 
.ttl{ 
 
    cursor:pointer; 
 
} 
 
.ttl::after{ 
 
    content: "\203A"; 
 
    font-weight: 800; 
 
    font-size: 25px; 
 
    line-height: 0px; 
 
    margin-top: -10px; 
 
    margin-left: 10px; 
 
    color: black; 
 
    display: inline-block; 
 
    transition: linear 500ms; 
 
} 
 
.ttl.ttl-clck::after{ 
 
    transform: rotate(90deg); 
 
    display: inline-block; 
 
    color:green; 
 
}

<ul> 
 
    <li id="title1-navbar" class="nav-bar"> 
 
    <a><span id="title1" class="ttl">menu-title1</span></a> 
 
    <ul> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
    </ul> 
 
    </li> 
 
    <li id="title2-navbar" class="nav-bar"> 
 
    <a><span id="title2" class="ttl">menu-title2</span></a> 
 
    <ul> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
    </ul> 
 
    </li> 
 
    <li id="title3-navbar" class="nav-bar"> 
 
    <a><span id="title3" class="ttl">menu-title3</span></a> 
 
    <ul> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
    </ul> 
 
    </li> 
 
</ul>