css - 如何在不取消选择器中的其他转换的情况下转换 1 个属性？

Question

我想知道我是否在 2 个属性上使用了转换 - translateY 和 scale 并且只想在悬停时转换比例我是否仍然必须在我的悬停转换中包含 translateY 属性以防止它被取消或者我有什么东西可以做些什么来防止这种情况？另外，我可以只转换比例而不是转换转换吗？我目前正在使用 compass 。如果有人可以推荐我如何增强此代码，那就太好了。

示例:

.btn {
    width: 100px;
    height: 20px;
    background: grey;
    display: block;
    @include transform( translateY(-50%) scale(1) );
    @include transition( transform .3s ease-in-out ); // i don't want to transition all transform properties but instead just the scale???

    &:hover {
        @include transform(translateY(-50%) scale(1.1)); //do i really need to have translateY in here even when it doesn't change on hover???
    }
}

密码本 http://codepen.io/anon/pen/BiGHl

Answer 1

据我所知，您需要保留 translateY(-50%) 条目。

由于平移和缩放都在 transform: 样式中，因此在悬停状态下不输入 translateY 值实际上是在告诉它 translatey(0%) 转换动画。

另一种方法是通过关键帧对其进行动画处理。