跳到主要内容

使用jQuery从CSS转换中获得更多

CSS动画和过渡具有很大的潜力,可以将您的设计变为现实。但他们经常会让你想要更多的控制来获得你真正想要的东西。

通过添加一点点JavaScript,您将看到我们可以轻松地扩展这些CSS功能的实用性。我们将创建更高级的交互,同时保持我们的代码简洁。两全其美的!

构建交互式小部件

我们的例子基于一个小小的交互式小部件,我和好人们一起做了胡子。它是拼图的数字版本,允许您将木块滑动到位以填充字母。单击某个块时,它会向下滑动,如果再次单击它,则会向上滑动。 (这显然是针对儿童网站的某种类型。“abc”部分可能就是这样。)

我们的基本结构

由于这是一个演示页面,我们正是我们所需要的,仅此而已:

我们有两层内容,我们将与之合作。从后面开始,我们首先有三个div代表我们拼图的可移动木块。这些包含在其父div #blocks中,以便以后更容易定位。最重要的是,我们有一个将作为我们面具的图像。这不是一个真正的面具,而是具有良好放置透明度的.png,这样我们就能看到字母的形状。

为了定位动画的两个层,我们将它们绝对放置在顶部和左侧0像素处。我们的图像被分配了一个z-index以使其保持在顶部,而略低的顶部位置为118像素,因此它位于我们的小部件的底部。

#blocks {width:300px;高度:300像素;位置:绝对的;顶部:0;左:0; overflow:hidden;} / *我们的“mask”图像位于动画块顶部* / .mask {position:absolute;顶:118px;左:0;的z-index:500;}

让我们感动!

现在我们已经完成了所有元素,让我们继续讨论有趣的东西并设置我们的过渡。

在这种情况下,我们想要的效果是木块被推入槽中。我们不需要在这里准确地模拟真实的物理,但是有些摩擦是我们想要的。现在是时候玩,并获得最适合您特定情况的宽松。

对我来说,基本的缓和关键词还有很多不足之处,所以我期待塞瑟帮助我为我的过渡定义一些自定义的立方贝塞尔定时函数,我更高兴。这是一个方便的工具,让您测试各种计时功能,并为您提供代码。数字可能有点可怕,但它们提供的近无限宽松可能性弥补了它。

/ *我们所有动画块的共享样式和动画定义* /.col {width:72px;高度:144px;位置:绝对的;顶部:10px的; -webkit-transition:全部225ms cubic-bezier(0.545,0.165,0.835,0.425); -moz-transition:全部225ms cubic-bezier(0.545,0.165,0.835,0.425); -ms-transition:全部225ms cubic-bezier(0.545,0.165,0.835,0.425); -o-transition:全部225ms立方贝塞尔(0.545,0.165,0.835,0.425);过渡:全部225ms立方贝塞尔(0.545,0.165,0.835,0.425); }

我们希望所有三个板都以相同的方式移动,这样我们就可以在单个类col中定义我们的转换(以及所有相关的供应商前缀),我们已经分配给所有彩色板。作为额外的奖励,这有助于保持良好的组织。

如果你是CSS过渡的新手,那么在这里定义过渡似乎很奇怪。 CSS转换通过分配给将要转换的元素来工作。转换中的all关键字意味着它将应用于所有关键字合格的房产当它们被改变时的那个元素。

随着我们共享的风格,我们将继续为每个彩色板分配其背景图像和略微交错的起始位置,以使事物看起来更多样化和有趣。

此外,我们创建了一个名为col-anim的类,它定义了一个顶部位置,表示所有彩色板可能达到的最低点。这将在稍后派上用场。

/ *每个块的特定图像和顶部位置* / .col1 {background:url(img / aslider.png);顶部:的22px; left:26px;} .col2 {background:url(img / bslider.png);顶部:4PX; left:100px;} .col3 {background:url(img / cslider.png);顶部:30PX; left:174px;} / *我们将用jQuery切换的类来触发我们的转换* / .col-anim {top:96px;}

现在我们已经为我们的拼图提供了一些很好的定位层,以及我们喜欢的过渡层,但它们仍然只是坐在那里等待成为,互动。只有最后一步。

添加jQuery

要开始转换,我们会更改其中一个元素的位置。只要应用于该元素的CSS转换和正在改变的属性,我们就会看到它对新位置进行动画处理。

纯粹使用CSS时,您可能最常通过在悬停时定义属性更改来完成此操作。这里适用相同的基本原则,但我们将通过jQuery应用更改。更具体地说,我们将动态地在活动板的div上添加和删除一个类,以便在单击时更改其顶部位置。

深入了解jQuery,我们首先使用以下行设置click事件:

$(“#blocks Div”)。click();

我们甚至可以非常有效地为所有三个div编写一个函数。这应该给我们一些额外的积分。 (“#blocks div”表示我们正在为#block的所有子div分配一个click事件。)

有了它,我们定义的函数将在每次点击时执行该div:

$(本).toggleClass( “COL-动画”);

把它们放在一起,我们有一个相当有效的外观功能。对于五行代码来说还不错!

$(function(){$(“#blocks div”)。click(function(){$(this).toggleClass(“col-anim”);});});

ToggleClass在这里非常方便,正如它的名字所暗示的那样。如果当前不存在该类,则将该类添加到该div中,或者如果已经存在,则将其删除。这就像一个开/关开关。

添加和删除该类有效地在每次单击时更改div的顶部位置。如果你一直在跟随,你知道顶部位置的变化会触发我们的过渡。这一系列事件是推动我们互动动画的动力!

通过组合toggleClass和转换,我们可以获得响应良好的交互,并且只需极少量的代码即可很好地处理中断。尝试在到达底部之前再次单击该板以查看此操作。你必须要快速,但即使它尚未到达底部,董事会也将开始回到原来的位置。我们让CSS过渡的固有行为为我们做了一些繁重的工作!

但等等,还有更多......

可点击的谜题很有趣,但它们可能在宏伟的计划中并不常见。但是,通过jQuery动态分配类以触发转换的基础技术有许多潜在的应用程序,超越了谜题。

此技术还可用于触发CSS关键帧动画。只需在特定类中定义动画,然后在希望播放动画时通过jQuery分配该类。这种确切的方法用于喜欢的网站每秒一小时为每个“故事”改变滚动背景动画。它对于循环动画尤其方便。

如果您使用类似的技术将CSS过渡和动画推向最大,我很乐意看到它们!



翻译字数超限