时间戳

首页 > 解决方案 > 在动画期间减小图标的大小

css - 在动画期间减小图标的大小

问题描述

当动画“slide-bck-top”处于焦点时，我正在尝试减小图标容器的大小（从 0% 的 110px 到 100% 的 50px）。我试图在 @keyframes 中传递 &__icon-container {} 但它没有用。这是我的 scss 文件：

.button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
  height: 150px;
  width: 230px;
  background-color: transparent;
  outline: none;

  &__icon-container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    color: color(white-0);
    background-color: color(blue-150);
    box-shadow: 0px 4px 4px color(black-0, 0.25);
    padding: 20px;
    cursor: pointer;
  }

  &__icon {
    fill: currentColor;
    width: 50px;
    height: 50px;
  }


  &:focus {
      animation: slide-bck-top 0.3s 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
  }

  @keyframes slide-bck-top {
    0% {
      transform: translateZ(0) translateY(0);
    }
    100% {
      transform: translateZ(-400px) translateY(-200px);
    }
  }
}

标签： csssass

解决方案

问题是@keyframes不允许您传递选择器，因为它是用于属性的，而 SCSS 不会正确编译它嵌套。这就像在color:属性中传递选择器一样。

您可以做的是将 传递.button__icon-container到:focus并移到@keyframes之外.button，因为@keyframes它实际上是一个全局范围项，并且 SCSS/SASS 仍然会将其呈现在外部.button。

.button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
  height: 150px;
  width: 230px;
  background-color: transparent;
  outline: none;

  &__icon-container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    color: color(white-0);
    background-color: color(blue-150);
    box-shadow: 0px 4px 4px color(black-0, 0.25);
    padding: 20px;
    cursor: pointer;
  }

  &__icon {
    fill: currentColor;
    width: 50px;
    height: 50px;
  }


  &:focus {
      animation: slide-bck-top 0.3s 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;

      .button__icon-container {
         animation: make-small 0.3s 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
    }
  }
}


@keyframes slide-bck-top {
    0% {
      transform: translateZ(0) translateY(0);
    }
    100% {
      transform: translateZ(-400px) translateY(-200px);
    }
  }

  @keyframes make-small {
    0% {
      width: 110px;
      height: 110px;
    }
    100% {
      width: 50px;
      height: 50px;
    }
  }

它编译为：

.button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
  height: 150px;
  width: 230px;
  background-color: transparent;
  outline: none;
}
.button__icon-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  color: color(white-0);
  background-color: color(blue-150);
  box-shadow: 0px 4px 4px color(black-0, 0.25);
  padding: 20px;
  cursor: pointer;
}
.button__icon {
  fill: currentColor;
  width: 50px;
  height: 50px;
}
.button:focus {
  animation: slide-bck-top 0.3s 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}
.button:focus .button__icon-container {
  animation: make-small 0.3s 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}

@keyframes slide-bck-top {
  0% {
    transform: translateZ(0) translateY(0);
  }
  100% {
    transform: translateZ(-400px) translateY(-200px);
  }
}
@keyframes make-small {
  0% {
    width: 110px;
    height: 110px;
  }
  100% {
    width: 50px;
    height: 50px;
  }
}

推荐阅读