类事件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.
更多推荐
发布评论