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

Question

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

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

1. 在“姓名”中输入任何内容
2. 点击标签

您应该到达第一个状态(左侧和底部的橙色边框以及一些过渡效果)，在该状态下它会从右上角拉出自己，我不明白为什么要这样做。它在 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 类。

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

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