添加类时奇怪的 CSS 过渡行为

Question

Class Event 1 是我试图通过直接放置类而不添加悬停属性来实现的，尽管它适用于Hover Elements。

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

1. 在“名称”中输入任何内容
2. 点击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%;
  }

是否必须添加/推荐::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 类。结果，立即应用边框宽度和高度。您需要做的是在宽度高度开始和结束值之间切换。我建议将.draw 类直接应用于标记中的按钮，而不是切换两个类，只在用户选项卡时切换.dj 类。

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

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