奇怪的CSS添加类的过渡行为(Strange CSS transition behavior on adding class)

奇怪的CSS添加类的过渡行为(Strange CSS transition behavior on adding class)

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

请检查此笔，并按照以下说明找到问题：

在“ 名称 ”中键入任何内容 单击Tab

你应该到达第一个国家（左边和底部的橙色边界以及一些过渡效果），其中它从右边角落，我不明白为什么它会这样做。 它在上面引用的悬停示例中也完全适用。

了解我的CSS

.draw { transition: color 0.25s;

Understanding of my CSS

.draw { transition: color 0.25s;

It gives an imaginary border of 2px transparent, which we will highlight later

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

This is where you start the transition of ::before from top-left corner

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

This will change the color of the text.

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

Here I want to expand it till 66% width.

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

Is it mandatory to 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 } }

最满意答案

我可以看到你的悬停演示和你的标签实现之间的一些区别。

首先，在悬停演示中，将左边框应用于.draw:before和底部边框.draw:after 。 在你的标签实现中，两个边界都被应用到.draw:after ，因为.draw:after对齐到按钮的底部，这会弄乱垂直动画，你实际上想要从顶部开始，在向下的方向上动画。 这通过给予.draw:after top:0 .draw:after top:0而不是bottom:0 。

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

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

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

I can see a couple of differences between your hover demo and your tab implementation.

The first is that in the hover demo a left border is applied to .draw:before and a bottom border to .draw:after. In your tab implementation both borders are applied to .draw:after, and since .draw:after is aligned to the bottom of the button this messes up the vertical animation, which you actually want to start from the top and animate in a downward direction. This is fixed by giving .draw:after top:0 instead of bottom:0.

The second problem is that you are applying the .draw and .dj classes simultaneously. As a consequence the border width and height is applied immediately. What you need to do is toggle between the width height start and end values. I suggest applying the .draw class directly to the button in your markup, and instead of toggling both classes, only toggle the .dj class when the user tabs.

Here is a forked pen with these changes applied: https://codepen.io/jnicol/pen/EbNavz

There are various other enhancements that could be made, but those changes should fix the immediate problem you have described.