mootools 元素追加_使用MooTools和CSS变形元素

mootools 元素追加

Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal.

使CSS类之间的元素变形是MooTools JavaScript库使您能够完成的另一大技巧。 变形并不是MooTools的最实际用途，但仍然是您可以使用的技巧。

View Demo 观看演示

步骤1：XHTML (Step 1: The XHTML)

<a href="javascript:;" class="switch-view" rel="view1">View 1</a> |
<a href="javascript:;" class="switch-view" rel="view2">View 2</a> |
<a href="javascript:;" class="switch-view" rel="view3">View 3</a>
<br /><br />

<div class="view1" id="content-block">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam hendrerit
	egestas nunc. Nam scelerisque neque a nibh. Proin tincidunt. Suspendisse
	facilisis, lorem et venenatis consectetuer, augue justo molestie lacus, id
	consectetuer ligula nibh a tellus.
</div>

The block of content that will change is the content-block DIV. Each link above the DIV will control which morph the DIV will undergo. Notice that each link is given the switch-view class so that they can be selected as an array by MooTools. Each link also has a rel attribute that contains the CSS class that the content-block DIV should morph into.

将要更改的内容块是内容块 DIV。 DIV上方的每个链接将控制DIV将经历的变形。 请注意，每个链接都具有switch-view类，因此MooTools可以将它们选择为数组。 每个链接还具有一个rel属性，其中包含内容块 DIV应该变形为CSS类。

步骤2：CSS (Step 2: The CSS)

.view1		{ border:2px solid #ffcc00; color:#000000; background:#fffea1; padding:5px; letter-spacing:3px; line-height:19px; font-family:tahoma; font-size:10px; }
.view2		{ border:9px dashed #0000ff; color:#009900; background:#fcfa56; padding:12px; letter-spacing:1px; line-height:22px; font-family:verdana; font-size:14px; }
.view3		{ border:5px solid #000000; color:#ffffff; background:#ff0000; padding:10px; letter-spacing:8px; line-height:25px; font-family:times; font-size:12px; }

I've defined three CSS classes with the same properties defined. If you fail to define the same properties in each class, you risk allowing the previous class' properties to stay during the morphing process.

我已经定义了三个具有相同属性CSS类。 如果未能在每个类中定义相同的属性，则有冒险使上一类的属性在变形过程中保留的风险。

步骤3：MooTools JavaScript (Step 3: The MooTools JavaScript)

//window on dom ready
window.addEvent('domready', function() {
	//for every switch-view link
	$$('.switch-view').each(function(el) {
		//add click event
		el.addEvent('click', function(e) {
			//nowhere
			e.stop();
			//morph baby!
			myFx = new Fx.Morph('content-block', {duration: 500, transition: Fx.Transitions.Sine.easeOut}).start('.' + el.get('rel'));
		});
	});
});

Once the DOM is ready, we use grab every link with the switch-view class. When any of these links are clicked on, the link's rel attribute is morphed into.

DOM准备就绪后，我们将使用switch-view类的每个链接。 当单击这些链接中的任何一个时，该链接的rel属性会变形为。

View Demo 观看演示

翻译自: https://davidwalsh.name/morphing-elements-mootools-css

mootools 元素追加