mootools_带有CSS或jQuery或MooTools JavaScript的Google Extension Effect

mootools

Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane and a detail pane. I've taken a few moments to duplicate that effect with just CSS, and another enhanced version with jQuery and MooTools.

谷歌和Mozilla这两个伟大的浏览器供应商都拥有扩展页面，这些页面利用简单但优雅的动画效果来增强页面。 Google使用的扩展程序之一是一种基本的边距动画，可以在两个窗格之间切换：图形窗格和详细信息窗格。 我花了一些时间仅用CSS复制该效果，并用jQuery和MooTools增强了另一个版本。

View Demo 观看演示

基本HTML和CSS (The Base HTML and CSS)

I'm using minimal elements within this code since, theoretically, there would be many of these on a given page and large DOM trees can drastically effect page performance:

我在此代码内使用了最少的元素，因为从理论上讲，给定页面上会有很多这样的元素，而大型DOM树会极大地影响页面性能：

<div class="item">
	<a href="/angry-birds">
		<div class="item-billboard">
			<img src="angrybirds.jpg" />
			<h3>Angry Birds</h3>
		</div>
		<div class="item-detail">
			<p>There's more detail about the item inside this DIV!</p>
		</div>
	</a>
</div>

Remember that HTML5 says we can wrap block-level elements with A tags, so don't hate on me!

请记住，HTML5表示我们可以使用A标签包装块级元素，所以不要讨厌我！

There's a fair amount of base CSS we need too:

我们也需要大量的基本CSS：

.item {
	position: relative;
	width: 240px;
	overflow: hidden;
	border: 1px solid #ccc;
}
	.item {
		height: 200px;
	}
	
	.item a {
		text-decoration: none;
		color: #000;
	}
	
	.item-billboard, .item-detail {
		padding: 10px;
		height: 180px;
	}
	
	.item-billboard {
		margin-top: 0;
		background: #fff;
	}
		.item-billboard h3 {
			font-size: 13px;
			font-weight: bold;
			color: #262626;
			font-family: "Open Sans", arial, sans-serif;
		}
	
	.item-detail {
		background: #ececec;
	}

The only restriction with the CSS above is that we're explicitly setting a lesser height for the billboard and detail blocks because we're adding padding to them. We could use the full 200px height of the parent for each of those blocks, and wrap the content for each in an additional DIV, allowing for animating margin-top to 100%, but that would add 2 extra nodes per block.

上面CSS的唯一限制是，我们明确为广告牌和明细块设置了较小的高度，因为我们要向其添加填充。 我们可以为每个块使用父级的完整200像素高度，并将每个块的内容包装在一个额外的DIV中，以将margin-top动画化为100％，但这将为每个块增加2个额外的节点。

仅CSS方法 (The CSS-Only Method)

Much like my Google Photo Stack post, the CSS-only version gets us 90% there. Browser-powered CSS animations give us the ability to animate to the second pane...

就像我的Google Photo Stack帖子一样 ，纯CSS版本使我们获得了90％的支持。 浏览器驱动CSS动画使我们能够对第二个窗格进行动画处理...

.item-billboard {
	margin-top: 0;
	background: #fff;
	
	/* add animations! */
	transition-property: margin-top;
	transition-duration: .5s;
}

/* animate on hover */
.itemCss:hover .item-billboard {
	margin-top: -200px;
}

Since the CSS transition settings are on the .billboard elements, the margin will animate both on hover and then back to its original state during mouseleave. Unfortunately you're out of luck if the client doesn't support CSS transitions. That's where we can use MooTools or jQuery to make it happen!

由于CSS过渡设置位于.billboard元素上，因此边距将在悬停时进行动画处理，然后在mouseleave期间返回其原始状态。 不幸的是，如果客户端不支持CSS转换，那么您很不走运。 那就是我们可以使用MooTools或jQuery实现它的地方！

jQuery和MooTools JavaScript (The jQuery and MooTools JavaScript)

Overriding the CSS animation with a bit of JavaScript will allow the same animation in older browsers. We can jQuery or MooTools to make that happen:

使用少量JavaScript覆盖CSS动画将允许在较旧的浏览器中使用相同的动画。 我们可以使用jQuery或MooTools来实现：

// MooTools
window.addEvent("domready", function() {
	$$(".itemJs").addEvents({
		mouseenter: function() {
			var billboard = this.retrieve("billboardElement");
			if(!billboard) {
				billboard = this.getElements(".item-billboard")[0];
				this.store("billboardElement", billboard);
			}
			billboard.tween("margin-top", "-200px");
		},
		mouseleave: function() {
			this.retrieve("billboardElement").tween("margin-top", 0);
		}
	});
});

// jQuery
jQuery(document).ready(function() {
	jQuery(".itemJQuery").bind({
		mouseenter: function() {
			var self = jQuery(this), billboard = self.data("billboardElement");
			if(!billboard) {
				billboard = jQuery(jQuery(".item-billboard", this)[0]);
				self.data("billboardElement", billboard);
			}
			jQuery(billboard).stop().animate({
				"margin-top": "-200px"
			});
		},
		mouseleave: function() {
			jQuery(this).data("billboardElement").stop().animate({
				"margin-top": 0
			});
		}
	});
});

In each case, we lazy-find billboard elements when they're hovered over and animate them just as the CSS does. Simple!

在每种情况下，我们都像在CSS上一样，在广告牌元素被悬停并对其设置动画时对其进行惰性查找。 简单！

View Demo 观看演示

I love the design of these blocks by Google. They provide a beautiful default view and allow for more detail when the user shows interest. I can see this strategy and effect being useful in many situations, as behind it is brilliant. A business that sells records could use the same sort of effect, for example. Well done to Google!

我喜欢Google设计的这些积木。 它们提供了精美的默认视图，并在用户显示兴趣时提供更多详细信息。 我看到这种策略和效果在许多情况下都很有用，因为它的背后是出色的。 例如，销售记录的企业可以使用相同的效果。 Google做得好！

翻译自: https://davidwalsh.name/google-extension-effect

mootools