css组件动画浮现
Some months ago, I wrote an article about MixItUp, a popular jQuery plugin for filtering and sorting. In today’s article, I’ll show you how to build your own simple filterable component with jQuery and CSS animations.
几个月前,我写了一篇关于MixItUp的文章,MixItUp是一个流行的用于过滤和排序的jQuery插件。 在今天的文章中,我将向您展示如何使用jQuery和CSS动画构建自己的简单可过滤组件。
Without further ado, let’s get started!
事不宜迟,让我们开始吧!
As a first step, I’ll show you the HTML structure of the component. Consider the following markup:
第一步,我将向您展示该组件HTML结构。 考虑以下标记:
<div class="cta filter"> <a class="all active" data-filter="all" href="#" role="button">Show All</a> <a class="green" data-filter="green" href="#" role="button">Show Green Boxes</a> <a class="blue" data-filter="blue" href="#" role="button">Show Blue Boxes</a> <a class="red" data-filter="red" href="#" role="button">Show Red Boxes</a> </div> <div class="boxes"> <a class="red" data-category="red" href="#">Box1</a> <a class="green" data-category="green" href="#">Box2</a> <a class="blue" data-category="blue" href="#">Box3</a> <!-- other anchor/boxes here ... --> </div>Notice that I’ve set up some pretty basic markup. Here’s an explanation of it:
注意,我已经设置了一些非常基本的标记。 这是它的解释:
First, I’ve defined the filter buttons and the elements that I want to filter (we’ll call them target elements). 首先,我定义了过滤器按钮和要过滤的元素(我们将它们称为目标元素)。Next, I’ve grouped the target elements into three categories (blue, green, and red) and I gave them the data-category attribute. The value of this attribute determines the category that each element belongs to.
接下来,我将目标元素分为三类(蓝色,绿色和红色),并为它们提供了data-category属性。 此属性的值确定每个元素所属的类别。
I’ve also assigned the data-filter attribute to the filter buttons. The value of this attribute specifies the desired filter category. For instance, the button with the data-filter="red" attribute/value will only show the elements that belong to the red category. On the other hand, the button with data-filter="all" will show all the elements.
我还data-filter器按钮分配了data-filter属性。 此属性的值指定所需的过滤器类别。 例如,具有data-filter="red"属性/值的按钮将仅显示属于red类别的元素。 另一方面,带有data-filter="all"的按钮将显示所有元素。
Now that you’ve had an overview of the required HTML, we can move on to explore the CSS.
现在,您已经对所需HTML有了一个概述,我们可以继续探索CSS。
Each time a filter category is active, its corresponding filter button receives the active class. By default, the button with the data-filter="all" attribute gets this class.
每次激活过滤器类别时,其相应的过滤器按钮都会接收到active类别。 默认情况下,具有data-filter="all"属性的按钮将获得此类。
Here are the associated styles:
以下是相关的样式:
.filter a { position: relative; } .filter a.active:before { content: ''; position: absolute; left: 0; top: 0; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 15px 15px 0 0; border-color: #333 transparent transparent transparent; }In addition, I’m going to use flexbox to create the layout for the target elements.
另外,我将使用flexbox创建目标元素的布局。
See the related styles below:
请参阅以下相关样式:
.boxes { display: flex; flex-wrap: wrap; } .boxes a { width: 23%; border: 2px solid #333; margin: 0 1% 20px 1%; line-height: 60px; }Lastly, I’m defining two different CSS keyframe animations that I’ll use later on to reveal the elements:
最后,我定义了两个不同CSS关键帧动画,稍后将使用它们来揭示元素:
@keyframes zoom-in { 0% { transform: scale(.1); } 100% { transform: none; } } @keyframes rotate-right { 0% { transform: translate(-100%) rotate(-100deg); } 100% { transform: none; } } .is-animated { animation: .6s zoom-in; // animation: .6s rotate-right; }With the markup and CSS in place, we can start building the JavaScript/jQuery.
有了标记和CSS,我们就可以开始构建JavaScript / jQuery。
Have a look at the code below, after which I’ll explain what’s happening:
看看下面的代码,之后我将解释发生了什么:
var $filters = $('.filter [data-filter]'), $boxes = $('.boxes [data-category]'); $filters.on('click', function(e) { e.preventDefault(); var $this = $(this); $filters.removeClass('active'); $this.addClass('active'); var $filterColor = $this.attr('data-filter'); if ($filterColor == 'all') { $boxes.removeClass('is-animated') .fadeOut().promise().done(function() { $boxes.addClass('is-animated').fadeIn(); }); } else { $boxes.removeClass('is-animated') .fadeOut().promise().done(function() { $boxes.filter('[data-category = "' + $filterColor + '"]') .addClass('is-animated').fadeIn(); }); } });Each time a filter button is clicked, the following happens:
每次单击过滤器按钮,都会发生以下情况:
The active class is removed from all buttons and assigned only to the selected button.
active类别将从所有按钮中删除,并且仅分配给所选按钮。
The value of the button’s data-filter attribute is retrieved and evaluated.
检索并评估按钮的data-filter属性的值。
If the value of data-filter is all, all elements should appear. To do so, I first hide them and then, when all elements become hidden, I show them using the rotate-right or zoom-in CSS animations.
如果data-filter值为all ,则应显示所有元素。 为此,我先隐藏它们,然后在所有元素都隐藏后,使用rotate-right或zoom-in CSS动画显示它们。
If the value is not all, the target elements of the corresponding category should appear. To do so, I first hide all elements and then, when all of them become hidden, I show only the elements of the associated category using the rotate-right or zoom-in CSS animations.
如果值不是all ,则应显示相应类别的目标元素。 为此,我先隐藏所有元素,然后在所有元素都隐藏后,使用rotate-right或zoom-in CSS动画仅显示关联类别的元素。
At this point, it’s important to clarify one thing. Notice the syntax for the fadeOut() method in the above code. It looks as follows:
在这一点上,澄清一件事很重要。 注意上面代码中的fadeOut()方法的语法。 它看起来如下:
$boxes.fadeOut().promise().done(function() { // callback's body });You’re probably more familiar with this syntax though:
但是,您可能更熟悉以下语法:
$boxes.fadeOut(function() { // callback's body });These declarations have different meanings:
这些声明具有不同的含义:
In the first case, the callback is executed only after all target elements become hidden. You can learn more info about this approach by visiting the promise() section of jQuery’s docs.
在第一种情况下,仅在所有目标元素都隐藏之后才执行回调。 您可以通过访问jQuery文档的promise()部分了解有关此方法的更多信息。
In the second case, the callback is fired multiple times. Specifically, it’s executed each time an element becomes hidden. 在第二种情况下,回调被触发多次。 具体来说,它在每次元素被隐藏时执行。The demo below uses the zoom-in animation:
下面的演示使用zoom-in动画:
See the Pen A sorting/filtering component with CSS and jQuery (with zoom animation) by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint ) 提供的带有CSS和jQuery(带有缩放动画)的Pen A排序/过滤组件 。
And this demo uses the rotate-right animation:
此演示使用rotate-right动画:
See the Pen A sorting/filtering component with CSS and jQuery (with rotate animation) by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint ) 提供的带有CSS和jQuery(带有旋转动画)的Pen A排序/过滤组件 。
Of course, the aforementioned CSS animations are optional. If you don’t like these specific animations, feel free to remove them and reveal the elements using only jQuery’s fadeIn() method.
当然,上述CSS动画是可选的。 如果您不喜欢这些特定的动画,请随意删除它们,并仅使用jQuery的fadeIn()方法显示元素。
Now that you understand how the component works, I’ll show you how to create a different variation of it.
现在您已经了解了组件的工作原理,我将向您展示如何创建该组件的其他变体。
Until now, you may have noticed that all elements appear at the same time. I’ll now modify the code to show them sequentially:
到目前为止,您可能已经注意到所有元素都同时出现。 现在,我将修改代码以按顺序显示它们:
$filters.on('click', function(e) { // same code as above here if ($filterColor == 'all') { $boxes.removeClass('is-animated') .fadeOut().finish().promise().done(function() { $boxes.each(function(i) { $(this).addClass('is-animated').delay((i++) * 200).fadeIn(); }); }); } else { $boxes.removeClass('is-animated') .fadeOut().finish().promise().done(function() { $boxes.filter('[data-category = "' + $filterColor + '"]').each(function(i) { $(this).addClass('is-animated').delay((i++) * 200).fadeIn(); }); }); } });The code above looks similar to the previous one but there are a few distinct differences:
上面的代码看起来与上一个类似,但是有一些明显的不同:
First, I use the each() method to iterate through the target elements. Plus, as it loops, I’m getting the index of the current element (which is zero-based) and multiplying it by a number (e.g. 200). The derived number is passed as an argument to the delay method. This number indicates the amount of milliseconds that each element should wait before fading in.
首先,我使用each()方法来遍历目标元素。 另外,在循环时,我正在获取当前元素的索引(从零开始)并将其乘以一个数字(例如200)。 派生的数字作为参数传递给delay方法。 此数字指示每个元素在淡入之前应等待的毫秒数。
Next, I use the finish() method to stop the currently-running animations for the selected elements under specific cases. To understand its usage, here’s a scenario: Click on a filter button and then, before all elements appear, click on the button again. You’ll notice that all elements disappear. Similarly, run this test again after removing the two instances of this method. In such a case, you’ll see that the elements receive some undesired effects. Sometimes calling this method properly can be tricky. For this example, I had to experiment a bit until I found where I should place it.
接下来,在特定情况下,我使用finish()方法停止所选元素的当前正在运行的动画。 要了解其用法,这里有一个场景:单击过滤器按钮,然后在所有元素出现之前,再次单击按钮。 您会注意到所有元素都消失了。 同样,在删除此方法的两个实例之后,再次运行此测试。 在这种情况下,您会看到元素收到了一些不良效果。 有时正确调用此方法可能很棘手。 对于此示例,我不得不进行一些实验,直到找到放置位置。
The demo below animates the filtered elements sequentially using the zoom-in animation:
下面的演示使用zoom-in动画按顺序对过滤后的元素进行动画处理:
See the Pen Sequential filtering/sorting component with CSS & jQuery by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint ) 使用CSS和jQuery的Pen 顺序过滤/排序组件 。
The demo below animates the filtered elements sequentially using the rotate-right animation:
下面的演示使用rotate-right动画按顺序对过滤后的元素进行动画处理:
See the Pen Sequential filtering/sorting with CSS and jQuery by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint ) 使用CSS和jQuery进行笔顺序过滤/排序 。
This same component could be built without jQuery and may have better performance, but the ability to use jQuery’s fadeIn() and fadeOut() methods allows for simpler code that takes advantage of certain features available to jQuery.
可以在不使用jQuery的情况下构建相同的组件,并且可能具有更好的性能,但是使用jQuery的fadeIn()和fadeOut()方法的能力可以简化代码,从而利用jQuery的某些功能。
Let me know in the comments if you have a different solution, or a way to improve the code.
如果您有其他解决方案或改进代码的方法,请在评论中让我知道。
翻译自: https://www.sitepoint.com/building-a-filtering-component-with-css-animations-jquery/
css组件动画浮现