如何进行变换：在悬停时使用过渡和动画进行缩放？

Question

我正在尝试使悬停缩放与动画缩放顺利配合。 Hover 适用于 #test 但适用于 .rotate 我无法让它正常工作。另外，为什么当动画填充模式为向前而不是无时，悬停比例不起作用？

https://codepen.io/yoholil/pen/qBLbYYm

let flag = false;
let test = document.querySelector("#test")


test.addEventListener("click", function() {
  console.log(1);
  flag && test.classList.add("rotate");
  !flag && test.classList.remove("rotate");
  flag = !flag;
});

#test {
  width: 200px;
  transition: 0.3s ease;
  animation: rotateRight 0.3s ease-in-out none;
}

#test:hover {
  transform: scale(1.2);
}

#test.rotate {
  transform: scaleX(-1);
  animation: rotateLeft 0.3s ease-in-out none;
}

@keyframes rotateRight {
  0% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes rotateLeft {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(-1);
  }
}

<img id="test" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" />

Answer 1

如果您需要初始翻转动画，请考虑使用带有缩放乘数的 CSS 变量，以便它在

animation

内工作：

let flag = false;
let test = document.querySelector("#test")


test.addEventListener("click", function() {
  console.log(1);
  flag && test.classList.add("rotate");
  !flag && test.classList.remove("rotate");
  flag = !flag;
});

#test {
  transform: scale(var(--multiplier));
  width: 200px;
  transition: 0.3s ease;
  animation: rotateRight 0.3s ease-in-out none;
  --multiplier: 1;
}

#test:hover {
  --multiplier: 1.2;
}

#test.rotate {
  transform: scale(calc(-1 * var(--multiplier)), var(--multiplier));
  animation: rotateLeft 0.3s ease-in-out none;
}

@keyframes rotateRight {
  0% {
    transform: scale(calc(-1 * var(--multiplier)), var(--multiplier));
  }
  100% {
    transform: scale(var(--multiplier));
  }
}

@keyframes rotateLeft {
  0% {
    transform: scale(var(--multiplier));
  }
  100% {
    transform: scale(calc(-1 * var(--multiplier)), var(--multiplier));
  }
}

<img id="test" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" />

否则，如果您不需要初始翻转动画，请考虑完全删除任何

animation

的使用：

let flag = false;
let test = document.querySelector("#test")


test.addEventListener("click", function() {
  console.log(1);
  flag && test.classList.add("rotate");
  !flag && test.classList.remove("rotate");
  flag = !flag;
});

#test {
  transform: scale(var(--multiplier));
  width: 200px;
  transition: 0.3s ease;
  --multiplier: 1;
}

#test:hover {
  --multiplier: 1.2;
}

#test.rotate {
  transform: scale(calc(-1 * var(--multiplier)), var(--multiplier));
}

<img id="test" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" />

---

此外，当

animation-fill-mode

是

forwards

而不是

none

时，悬停比例不起作用，因为

transform

中的

@keyframes

属性值将优先于 CSS 规则中定义的任何属性。

Answer 2

只需使用包装纸并应用

:hover

即可：

test.addEventListener('click', () => test.classList.toggle('rotate'));

#test {
  width: 200px;
  transition: transform .3s ease;
}

#test:hover {
  transform: scale(1.2);
}

#test img{
  animation: rotateRight .3s ease-in-out both;
  max-width: 100%;
}

#test.rotate img{
  animation: rotateLeft .3s ease-in-out both;
}

@keyframes rotateRight {
  0% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes rotateLeft {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(-1);
  }
}

<div id="test">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png">
</div>