按钮过渡效果使用类不相应的工作

Question

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

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

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

This是我要编辑的表单。

我的方法

如果用户完成第一个字段的编辑，则会在添加“draw dj”类时触发事件1

然后当用户完成第二个字段的编辑时，类“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

更新帖子后，您遗失的最后一件事是background-size课程中的draw1属性。

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

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