Question

我正在尝试转换psuedo元素，并想知道这是否可行。我已经读过一段时间这是不可能的，但显然现在是这样，但我无法让它发挥作用。

这是一个codepen http://codepen.io/anon/pen/WbGeaB - 当你点击汉堡包图标时，我希望psuedo元素在旋转时转换，目前只有中间栏有应用过渡（这是有效的，因为这不是一个伪造的元素）。

如果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);
}

的Javascript

$(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;
}

forked codepen：

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和转换，以确保您的代码可以在所有平台上运行。 -moz，-ms和-o是不可取的。请阅读本文中有关转换兼容性的更多信息：http://www.web-plus-plus.com/Articles/css-transition-moz-and-webkit-vs-css3

试图转换这个伪元素 - CSS3转换旋转

2 个答案: