嘗試轉換此psuedo元素-CSS3變換旋轉

Question

我正在嘗試轉換psuedo元素，並想知道這是否可能。 我已經讀過一段時間，這是不可能的，但顯然現在已經可以了，但是我無法使其工作。

這是一個Codepen http://codepen.io/anon/pen/WbGeaB-當您單擊漢堡包圖標時，我希望psuedo元素在旋轉時進行過渡，目前只有中間欄應用了過渡（這是因為這不是偽元素）。

如果偽元素不能轉換，是否還有另一種方式可以得到我想要的效果？

提前致謝

的HTML

<a class="toggleMenu" href="#">
  <span class="menuIcon"></span>
</a>

的CSS

.toggleMenu {
  display: block;
  position: absolute;
  padding:1.8em;
  left:50%;
  top:50%;
}  

.menuIcon {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 50px;
    height: 5px;
    background-color: #555;
/*-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
transition: transform 1s ease;*/
-webkit-transition:all 1s ease;
}

.menuIcon:before,
.menuIcon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0;
}

.menuIcon:before {
    bottom: 20px;
}
.menuIcon:after {
    top: 20px;
}

.menuIcon.clicked {
    background-color: rgba(255, 255, 255, 0);
}

.menuIcon.clicked:before,
.menuIcon.clicked:after {
    background-color: #555;
}

.menuIcon.clicked:before {
    bottom: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}   

.menuIcon.clicked:after {
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}   

Java腳本

$(function(){   
   $(".toggleMenu").click(function(){
      $(".menuIcon").toggleClass("clicked");
     });
 });

Answer 1

您可以將過渡應用於偽元素。 在您的情況下，您只需要添加

transition:all 1s ease;

偽元素的規則。 偽元素不會繼承其父代的所有規則。

因此，您對偽元素的規則如下所示：

.menuIcon:before,
.menuIcon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0;

    /* add the transition here */
    -webkit-transition:all 1s ease;
    transition:all 1s ease;
}

分叉的代碼筆：

http://codepen.io/anon/pen/wBzwNO

Answer 2

過渡可以應用於偽元素，但是您應該在偽元素的類本身中定義過渡。 在您的情況下：

.menuIcon:before,.menuIcon:after {
    -webkit-transition: all 1s ease;
    transition:all 1s ease
}

.menuIcon.clicked:before,.menuIcon.clicked:after {
    -webkit-transition:all 1s ease;
    transition:all 1s ease
}

請注意，它應該同時是-webkit-transition和transition，以確保您的代碼可在所有平台上正常工作。 -moz，-ms和-o是無可否認的。 在本文中閱讀有關過渡兼容性的更多信息： http : //www.web-plus-plus.com/Articles/css-transition-moz-and-webkit-vs-css3