github 滑动删除_GitHub风格的滑动链接-白红宇

github 滑动删除

GitHub seems to change a lot but not really change at all, if that makes any sense; the updates come often but are always fairly small. I spotted one of the most recent updates on the pull request page. Links to long branch names now have their text visually truncated, and upon hover, the text animates to its full value. The CSS to accomplish this task is fairly simple, so let me show you how to make this happen!

GitHub似乎有很大的变化，但如果有任何意义，则根本没有真正的变化。更新经常出现，但总是很小。我在拉取请求页面上发现了最新更新之一。现在，指向长分支名称的链接在视觉上被截断，并且悬停时，该文本会动画显示其完整值。完成此任务CSS非常简单，所以让我向您展示如何实现这一目标！

HTML (The HTML)

Adding an A element is obvious but less obvious is that the element must be wrapped with another element (you'll see why in the CSS section):

添加一个A元素是显而易见的，但不太明显的是该元素必须用另一个元素包装(您将在CSS部分中看到原因)：

Pull request from: david-walsh-test-branch-name

Simples.

简单。

CSS (The CSS)

The wrapping element requires a max-width and position of relative:

包装元素需要max-width和relative position ：

.github-branch-wrap {	max-width:690px;	position:relative;}

The animation centers around CSS transitions and the max-width property paired with overflow:

动画围绕CSS过渡和max-width属性与溢出配对：

.github-branch {	position: relative;	height: 24px;	display: inline-block;	top: 7px;	padding: 0 7px;	background: #444;	background: -moz-linear-gradient(#444, #222);	background: -webkit-linear-gradient(#444, #222);	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#222222')";	border: 1px solid black;	border-radius: 3px;	color: white;	font-family: Consolas,"Liberation Mono",Courier,monospace;	font-size: 13px;	line-height: 24px;	text-overflow: ellipsis;	overflow: hidden;	white-space: nowrap;	vertical-align: top;	z-index: 100;		max-width: 125px;	transition: .2s max-width linear;	-o-transition: .2s max-width linear;	-moz-transition: .2s max-width linear;	-webkit-transition: .2s max-width linear;	-ms-transition: .2s max-width linear;}/* Transition to complete width! */.github-branch:hover, .github-branch:active {	max-width: inherit;}

Also note the nice touch of text-overflow:ellipsis -- this adds the "..." during the plain state.

还要注意text-overflow:ellipsis -在纯text-overflow:ellipsis状态下添加了“ ...”。

I didn't like the effect at first, but it's grown on me, and actually does have some value. There's definitely some clever thought behind the effect, and it's the the type of effect I admire: simple but purposeful. Well done GitHub devs!

一开始我不喜欢这种效果，但是这种效果在我身上逐渐形成，并且确实具有一定的价值。效果背后肯定有一些聪明的想法，这是我欣赏的效果类型：简单但有目的。 GitHub开发人员做得好！

翻译自:

github 滑动删除