添加类时奇怪的CSS转换行为

Question

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

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

1. 在＆＃34; 名称＆＃34;
中输入任何内容
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

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