未使用转换的 CSS3 过渡？答案

【问题标题】：CSS3 transition for transform not being used?未使用转换的 CSS3 过渡？
【发布时间】：2015-01-14 00:58:07
【问题描述】：

我已经研究这个以移动为主题的“汉堡”菜单已经有很长一段时间了，而且我几乎完成了 - 我只需要修复转换的过渡即可。我希望它像 apple.com 移动菜单一样，两个条连接然后形成一个“x”。我相信我的变换是正确的，但显然我没有。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="menu.js"></script>
<title>Icon Test</title>
<style>
* {
    margin: 0;
    padding: 0;
    border: 0;
}

.container {
    display: block;
    width: 48px;
    height: 48px;
    background: #999;
}

.line-top {
    position: absolute;
    top: 0;
    left: 0;
    fill: #FFF;
    transition: all 2s ease 3s;
    -moz-transition: all 2s ease 3s;
}

.line-top-active {
    transform: translateX(0px) rotate(45deg);
    -moz-transform: translateX(0px) rotate(45deg);
    transform-origin: center;
    -moz-transform-origin: center;
}

.line-bottom {
    position: absolute;
    top: 0;
    left: 0;
    fill: #FFF; 
}

.line-bottom-active {
    transition: all 2s ease 3s;
    -moz-transition: all 2s ease 3s;
    transform: translateX(0px) rotate(-45deg);
    -moz-transform: translateX(0px) rotate(-45deg);
    transform-origin: center;
    -moz-transform-origin: center;
}

.rect-top {
    transition: all 2s ease-in-out 0s;
    -moz-transition: all 2s ease-in-out 0s;
}

.rect-top-active {
    transform: translateY(8);
    -moz-transform: translateY(8);
    transform-origin: center;
    -moz-transform-origin: center;
}

.rect-bottom {
    transition: all 2s ease-in-out 0s;
    -moz-transition: all 2s ease-in-out 0s;
}

.rect-bottom-active {
    transform: translateY(-8);
    -moz-transform: translateY(-8);
    transform-origin: center;
    -moz-transform-origin: center;
}
</style>
</head>

<body>
<div class="container" id="button">
    <svg id="svg-top" class="line-top" x="0px" y="0px" width="48px" viewBox="0 0 96 96" enable-background="new 0 0 96 96">
        <rect id="rect-top" class="rect-top" width="32" height="4" x="32" y="38"></rect>
    </svg>
    <svg id="svg-bottom" class="line-bottom" x="0px" y="0px" width="48px" viewBox="0 0 96 96" enable-background="new 0 0 96 96">
        <rect id="rect-bottom" class="rect-bottom" width="32" height="4" x="32" y="54"></rect>
    </svg>
</div>
</body>
</html>

JS（以防万一）

function init() {
    alert("Loaded");
    document.getElementById('button').onclick = function() {
        alert("Success");
        var topSvg = document.getElementById('svg-top');
        var bottomSvg = document.getElementById('svg-bottom');  
        var topLine = document.getElementById('rect-top');
        var bottomLine = document.getElementById('rect-bottom');

        topLine.setAttribute('class', 'rect-top-active'); 
        bottomLine.setAttribute('class', 'rect-bottom-active');
        topSvg.setAttribute('class', 'line-top-active');
        bottomSvg.setAttribute('class', 'line-bottom-active');  
    }
};

window.onload = init;

【问题讨论】：

检查它可能对你有帮助：-codepen.io/mblode/pen/evjfn

标签： javascript html css transform css-transitions

【解决方案1】：

不需要svg，我们可以使用：

:before and :after pseudo elements 创建两个笔画
CSS animation 旋转成X 形状/旋转出X 形状。
transition 在鼠标离开时将线条一起移动到中间并分开

Apple 移动网站如下所示：

我的游戏是这样的：

完整示例

jQuery 用于添加一个类，以在鼠标第一次离开时触发关闭动画。它可以很容易地替换为 vanilla Javascript。

此示例在悬停时触发，这可以很容易地通过 javascript 更改为点击时。

$('a').mouseleave(function() {
  if (!$(this).hasClass('mouseOut')) {
    $(this).addClass('mouseOut');
  }
});

a {
  position: relative;
  display: block;
  height: 16px;
  width: 16px;
}
a:before,
a:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  width: 16px;
  background: #000;
  transition: all 0.3s 0.3s linear;
  top: 4px;
}
a:after {
  top: 10px;
}
a:hover:before,
a:hover:after {
  top: 7px;
  top: 7px;
  -webkit-animation: rotationBefore 0.3s 0.3s linear forwards;
  animation: rotationBefore 0.3s 0.3s linear forwards;
  transform: rotate(135deg);
  transition: all 0.3s linear;
}
a:hover:after {
  -webkit-animation: rotationAfter 0.3s 0.3s linear forwards;
  animation: rotationAfter 0.3s 0.3s linear forwards;
  transform: rotate(-135deg);
}


.mouseOut:before {
  -webkit-animation: rotationBeforeLeave 0.3s linear forwards;
  animation: rotationBeforeLeave 0.3s linear forwards;
}
.mouseOut:after {
  -webkit-animation: rotationAfterLeave 0.3s linear forwards;
  animation: rotationAfterLeave 0.3s linear forwards;
}
@-webkit-keyframes rotationBefore {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(135deg);
  }
}
@-webkit-keyframes rotationAfter {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-135deg);
  }
}
@-webkit-keyframes rotationBeforeLeave {
  0% {
    transform: rotate(135deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes rotationAfterLeave {
  0% {
    transform: rotate(-135deg);
  }
  100% {
    transform: rotate(0);
  }
}



@keyframes rotationBefore {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(135deg);
  }
}
@keyframes rotationAfter {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-135deg);
  }
}
@keyframes rotationBeforeLeave {
  0% {
    transform: rotate(135deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes rotationAfterLeave {
  0% {
    transform: rotate(-135deg);
  }
  100% {
    transform: rotate(0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#"></a>

【讨论】：

谢谢，这不仅是创建漂亮动画的好例子，也是伪选择器 :before 和 :after 的一个很好的例子！