25Mar/110
CSS3动画实现mouseLeave和mouseEnter的不同效果
Eric在Inconsistent Transitions 中指出CSS3动画在浏览器中的不一致。
div:hover span {
transition: 1s transform;
transform: rotate(270deg);
}
transition: 1s transform;
transform: rotate(270deg);
}
上面代码只在鼠标移动到div上时有过渡动画(transition)，在鼠标离开div时没有过渡动画。并给出如下解决文案：
div span {
transition: 1s transform;
}
div:hover span {
transform: rotate(270deg);
}
transition: 1s transform;
}
div:hover span {
transform: rotate(270deg);
}
这样，当鼠标进入和离开div时，都有过渡动画效果。其实我们可以进一步实现鼠标进入（mouseEnter）和鼠标离开（mouseLeave）的不同效果。
/*mouseleave*/
div span {
transition: 3s transform;
}
/*mouseenter*/
div:hover span {
transform: rotate(270deg);
transition: 1s transform;
}
div span {
transition: 3s transform;
}
/*mouseenter*/
div:hover span {
transform: rotate(270deg);
transition: 1s transform;
}
这样，就实现了mouseLeave和mouseEnter的不同过渡效果。