添加 class 时出现奇怪的 CSS 过渡行为

Question

Class Event 1 is what I am trying to achieve by just placing class directly and not adding hover properties, though it's working for Hover Elements.

请检查this笔，您可以按照以下说明找到问题：

在“名称”中输入任何内容
点击Tab

你应该到达第一个状态（左边和底部的橙色边框和一些过渡效果），它从右上角拉自己，我不明白它为什么这样做。它在上面提到的 Hover Example 中也完全完美地工作。

了解我的CSS

.draw {

    transition: color 0.25s;

它给出了一个2px透明的假想边框，我们稍后会强调

  &::before,
  &::after {    
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }

这是从左上角

开始::before过渡的地方

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

这将更改文本的颜色。

  &.dj {
    color: rgb(255,123,0);
  }

这里我想把它扩展到 66% 宽度。

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

add/recommended ::after 是必须的吗？

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

Answer 1

我可以看到您的悬停演示和选项卡实现之间的一些差异。

首先是在悬停演示中，左边框应用于 .draw:before，底边框应用于 .draw:after。在您的选项卡实现中，两个边框都应用于 .draw:after，并且由于 .draw:after 与按钮的底部对齐，这会弄乱垂直动画，您实际上想从顶部开始并在向下的方向。这是通过给出 .draw:after top:0 而不是 bottom:0.

来解决的

第二个问题是您同时应用了 .draw 和 .dj classes。因此，边框宽度和高度会立即应用。您需要做的是在宽度高度开始值和结束值之间切换。我建议将 .draw class 直接应用到标记中的按钮，而不是切换两个 classes，只切换 .dj class 当用户选项卡。

这是应用了这些更改的分叉笔：https://codepen.io/jnicol/pen/EbNavz

可以进行其他各种改进，但这些更改应该可以解决您所描述的直接问题。

添加 class 时出现奇怪的 CSS 过渡行为

Strange CSS transition behavior on adding class

javascript

css

transition

css-transitions

了解我的CSS