（二）Transition 实现动画

老怪兽

发布于 2023-02-22 18:53:40

36400

代码可运行

文章被收录于专栏：老怪兽的前端之旅老怪兽的前端之旅

运行总次数：0

代码可运行

使用 `Transition` 实现动画 `css` 自己的动画跟 `vue` 没啥关系

-设置动画属性参考网站open in new window

说明

什么是过度过度就是一个元素从一个状态过度到另外一个状态的过程，就比如一个元素鼠标移上去慢慢变化颜色
Transition 和 @keyframes 的区别是啥 Transition 只有一个开始和结束过程，无法设置中间时间的变化，而 @keyframes 强调一个动画的运动轨迹，会随着时间的变化而不同，可以通过 % 来控制

/* 盒子样式 */
.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(
    45deg,
    hsl(240deg, 60%, 50%),
    hsl(300deg, 90%, 50%)
  );
  padding: 0.5em 1.4em;
  border-radius: 4px;
  color: white;
  transition: all 0.5s ease-in-out;
}

/* 鼠标移动上去 盒子变大，倾斜 通过 transition 来实现 */
.box:hover {
  transform: scale(1.25) skewY(-20deg) rotateY(20deg);
}