[英]Trying to transition this psuedo element - CSS3 Transform rotate
I am trying to transition a psuedo element and wanted to know if this is possible. 我正在尝试转换psuedo元素,并想知道这是否可能。 I have read that this was not possible for a while but apparently now it is, but I cannot get it working. 我已经读过一段时间,这是不可能的,但显然现在已经可以了,但是我无法使其工作。
Here is a codepen http://codepen.io/anon/pen/WbGeaB - When you click on the hamburger icon, I want the psuedo elements to transition when they rotate, currently only the middle bar has the transition applied (which works because this is not a psuedo element). 这是一个Codepen http://codepen.io/anon/pen/WbGeaB-当您单击汉堡包图标时,我希望psuedo元素在旋转时进行过渡,目前只有中间栏应用了过渡(这是因为这不是伪元素)。
If psuedo elements are not able to transition, is there a another way to get the effect I desire? 如果伪元素不能转换,是否还有另一种方式可以得到我想要的效果?
Thanks in advance 提前致谢
HTML 的HTML
<a class="toggleMenu" href="#">
<span class="menuIcon"></span>
</a>
CSS 的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 Java脚本
$(function(){
$(".toggleMenu").click(function(){
$(".menuIcon").toggleClass("clicked");
});
});
You can apply transitions to pseudo elements; 您可以将过渡应用于伪元素。 in your situation you just need to add the 在您的情况下,您只需要添加
transition:all 1s ease;
to the pseudo element's rule. 伪元素的规则。 The pseudo elements don't inherit all of their parent's rules. 伪元素不会继承其父代的所有规则。
So your rule on the pseudo elements would look like this: 因此,您对伪元素的规则如下所示:
.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 http://codepen.io/anon/pen/wBzwNO
Transition can be applyed on pseudo elements, but you should define it in the pseudo element's class itself. 过渡可以应用于伪元素,但是您应该在伪元素的类本身中定义过渡。 In your case: 在您的情况下:
.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
}
Pay attetion that it should be both -webkit-transition and transition exactly in this order to ensure that your code will work on all the platforms. 请注意,它应该同时是-webkit-transition和transition,以确保您的代码可在所有平台上正常工作。 -moz, -ms and -o are unneccessaty. -moz,-ms和-o是无可否认的。 Read more about the transitions compatibility in this article: http://www.web-plus-plus.com/Articles/css-transition-moz-and-webkit-vs-css3 在本文中阅读有关过渡兼容性的更多信息: http : //www.web-plus-plus.com/Articles/css-transition-moz-and-webkit-vs-css3
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.