javascript - 使用类的按钮过渡效果无法正常工作

Question

我想得到这些 3 events在表单填写时触发。但所有这些都应该在同一个按钮上。

我能够使用 3 个类来实现它，即

• “draw dj”这是第一个事件
• “draw1 dj”这是第二个事件
• “draw2 dj”是最后的事件

This是我要编辑的表单。

我的方法

如果用户完成第一个字段的编辑，事件 1 被触发，因为添加了类“draw dj”

然后当用户完成第二个字段的编辑时，类“draw dj”被“draw1 dj”替换(这完全没问题)

但是当第三个事件被触发时，过渡并没有发生，而是直接转换为最终外观。

我应该得到的 CSS

.draw2 {
    // transition: color 0.25s;
  color: lightgrey; 
  background-image: linear-gradient(rgb(255,123,0),rgb(255,123,0));
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s 0.8s, color 1s 0.5s;
  &:hover{
    color:white;
    background-size:100% 100%;
  }
  &::before,
  &::after {
    // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }

  // This covers the top & right borders (expands right, then down)
  &::before {
    top: 0;
    left: 0;
  }

  // And this the bottom & left borders (expands left, then up)
  &::after {
    bottom: 0;
    right: 0;
  }



  // Hover styles
  &:hover::before,
  &:hover::after {
    width: 100%;
    height: 100%;
  }

  &:hover::before {
    border-left-color: rgb(255,123,0); // Make borders visible
    border-bottom-color: rgb(255,123,0);
    transition:
      width 0s ease-out, // Width expands first
      height 0s ease-out; // And then height
  }

  &:hover::after {
    border-right-color: rgb(255,123,0); // Make borders visible
    border-top-color: rgb(255,123,0);
    color:white;
    transition:
      border-color 0s ease-out, // Wait for ::before to finish before showing border
      height 0.25s ease-out, // And then exanding width
      width 0.25s ease-out 0.25s; // And finally height
  }
}

---

我现在得到的 CSS

.draw2 {
    // transition: color 0.25s;
  color: lightgrey; 
  background-image: linear-gradient(rgb(255,123,0),rgb(255,123,0));
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s 0.8s, color 1s 0.5s;
  &.dj{
    color:white;
    background-size:100% 100%;
  }
  &::before,
  &::after {
    // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }

  // This covers the top & right borders (expands right, then down)
  &::before {
    top: 0;
    left: 0;
  }

  // And this the bottom & left borders (expands left, then up)
  &::after {
    bottom: 0;
    right: 0;
  }



  // Hover styles
  &.dj::before,
  &.dj::after {
    width: 100%;
    height: 100%;
  }

  &.dj::before {
    border-left-color: rgb(255,123,0); // Make borders visible
    border-bottom-color: rgb(255,123,0);
    transition:
      width 0s ease-out, // Width expands first
      height 0s ease-out; // And then height
  }

  &.dj::after {
    border-right-color: rgb(255,123,0); // Make borders visible
    border-top-color: rgb(255,123,0);
    color:white;
    transition:
      border-color 0s ease-out, // Wait for ::before to finish before showing border
      height 0.25s ease-out, // And then exanding width
      width 0.25s ease-out 0.25s; // And finally height
  }
}

Answer 1

更新帖子后，您最后缺少的是 draw1 类中的 background-size 属性。

.draw1 {
    background-size: 0% 100%;
    &::before,
    ...

CSS 动画需要一个起点。您正在应用一个最终值为背景大小的类，但 CSS 没有开始动画的起点。因此，您可以直接“切换”到最终值。