如何在内容后对::进行动画制作？

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>