如何为 ::after 内容添加动画效果？

Question

在下面的代码中，我试图对我的::after内容应用动画（旋转），但它表现出了多种行为。

• 在我的本地浏览器中，它会旋转但闪烁所有其他内容（在其旋转期间）

• 它在代码片段上不起作用

  我该怎么办？

我尝试通过添加@-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>

- ADH - THE TECHIE GUY

---

你想要jQuery还是js代码？ - Sa Si Kumar

@Sasikumar 纯 JavaScript 代码 - ADH - THE TECHIE GUY

Answer 1

当你添加 inline-block 或 block 显示时，你的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>

- Raeesh Alam

Answer 2

你需要添加以下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>

- Sa Si Kumar