列表加载动画 列表增加移除的动画

2020-12-01 16:59:05

参考地址 Animating List Items

When parts of a web page change, adding some animation is a good way to help your viewers understand what’s going on. Animations can announce the arrival of new content, or draw attention to content that’s in the process of being removed. In this article we’ll look at how this can be used to help introduce new content, by showing and hiding items in a list.

  • List item

  • List item

Introducing content

Animation can be useful when helping visitors understand when things change on your site. When content is added or removed without any animation, they can miss sudden changes and be confused. Adding subtle animations can avoid this and help by “announcing” that something is going to leave the page or be introduced to it.

One example of adding or removing content is managing the content of a list. Most of the animations can be used for other sorts of content. If you find them useful, or have other ideas to add, do get in touch, we love to hear your thoughts.

Setting up the HTML

To get started we’ll use a pre-filled list and a button to add new items to the list.

<ul id="list">
  <li class="show">List item</li>
  <li class="show">List item</li></ul><button id="add-to-list">Add a list item</button>

A few things to note. Firstly we have two IDs in the HTML. Generally we don’t use IDs for styling, as they can introduce problems with their specificity. However they’re useful when using JavaScript.

The initial items have the class “show”, as this is a class we’ll use later to add the animation effect.

A little JavaScript

For the purpose of the demo we’ll create a little JavaScript to add a new item to the list, then add the “show” class so that the animation can take place. There’s a reason for using this two-step process. If the list items were added in a visible state, there wouldn’t be any time for the transition to take place.

We could get around this by using an animation on the li elements, but this would be more difficult to override when removing the elements with another animation.

/*
 * Add items to a list - from cssanimation.rocks/list-items/
 */document.getElementById('add-to-list').onclick = function() {  var list = document.getElementById('list');  var newLI = document.createElement('li');
  newLI.innerHTML = 'A new item';
  list.appendChild(newLI);
  setTimeout(function() {
    newLI.className = newLI.className + " show";
  }, 10);
}

No animation

At it’s most basic we can write some CSS to show the list items. We’re using the show class as a way of setting them as visible, so removing the show class should also cause them to disappear.

li {  list-style: none;  background: #d1703c;  color: #fff;  height: 0;  line-height: 2em;  margin: 0;  padding: 0 0.5em;  overflow: hidden;  width: 10em;}li.show {  height: 2em;  margin: 2px 0;}

In these styles we’re setting up the li elements to look like rectangles, without the bullet points and giving them a height of 0, a margin of 0 and set overflow to hidden. This is so that they will appear invisible until we apply a show class.

The show class applies a height and margin. Since we’re not using animation yet, the items should appear suddenly on the page, like so. Also try pressing the list items to see them disappear.

  • List item

  • List item

Fade

As a first animation we’ll add a simple fade effect. The list items appear a little more gradually than before. Visually this still looks a little clunky but has the benefit of giving viewers longer to notice that something is happening.

  • List item

  • List item

To add the effect I’ve created a separate snippet of CSS. To have this apply to the list, apply the class fade to a container surrounding your list.

.fade li {  transition: all 0.4s ease-out;  opacity: 0;  height: 2em;}.fade li.show {  opacity: 1;}

Slide down & Fade

The sudden jump each time an item is added or removed is a litle jarring. Let’s have the height adjust as well, to create a smoother sliding effect.

  • List item

  • List item

The difference between this and the fade class above is only that the height: 2em has been removed. Since the show class contains a set height (inherited from the first CSS snippet), it will transition the height automatically.

.slide-fade li {  transition: all 0.4s ease-out;  opacity: 0;}.slide-fade li.show {  opacity: 1;}

Swinging in

Along with fading and sliding, we can go further by adding a little 3D effect. Browser can transform elements in more than the X or Y directions, useful for adding depth to scenes.

  • List item

  • List item

To set this up, we need to define the containing section as a stage within which the 3D transitions take place. We do this by giving it a perspective value.

Perspective in CSS is the depth of the scene. A lower number means a more shallow perspective, with more extreme angles. It’s worth playing with this value to find a look that works for you.

.swing {  perspective: 100px;}

Next we set up the li elements to transform into place. We’ll use opacity to create a fade effect as before, but add in a transform to rotate the li into place.

.swing li {  opacity: 0;  transform: rotateX(-90deg);  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);}.swing li.show {  opacity: 1;  transform: none;  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);}

In this example we’re beginning with the li rotated back by 90 degrees. When the show class it added, this transform is set to none, allowing it to transition into place. To give it a swinging effect I’ve used the cubic-bezier timing function.

Swinging from side

We can tweak this effect to create different styles quite easily. Here’s an example where the items swing in from the side.

  • List item

  • List item

To create this effect we only need change the axis of rotation.

.swing li {  opacity: 0;  transform: rotateY(-90deg);  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);}

All we’ve changed is rotateX to rotateY.

Prefixes and browser testing

The code included above does not include any prefixes, for readability. It’s strongly recommended to add prefixes to support browsers that need the -webkit prefix or others. I use Autoprefixer to save worrying about these things.

As these animations are layered on top of the basic show / hide mechanism, they should degrade gracefully on browsers that don’t support the animations. Testing on various devices and browsers is important but most modern browsers should be able to support these animations.


  • 2018-12-07 22:19:33

    修改 Nginx 进程最大可打开文件数(worker_processes和worker_connections)

    worker_processes:操作系统启动多少个工作进程运行Nginx。注意是工作进程,不是有多少个nginx工程。在Nginx运行的时候,会启动两种进程,一种是主进程master process;一种是工作进程worker process。例如我在配置文件中将worker_processes设置为4,启动Nginx后,使用进程查看命令观察名字叫做nginx的进程信息,我会看到如下结果:

  • 2018-12-07 22:55:02

    nginx worker_processes 配置

    据另一种说法是,nginx开启太多的进程,会影响主进程调度,所以占用的cpu会增高, 这个说法我个人没有证实,估计他们是开了一两百个进程来对比的吧。

  • 2018-12-08 11:44:26

    php 时间函数strtotime 使用详解

    这篇文章介绍的内容是关于php 时间函数strtotime 使用详解 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

  • 2018-12-09 15:52:37

    【Android - 进阶】之Animator属性动画

    在3.0系统之前,Android给我们提供了逐帧动画Frame Animation和补间动画Tween Animation两种动画: 逐帧动画的原理很简单,就是将一个完整的动画拆分成一张张单独的图片,然后将它们连贯起来进行播放; 补间动画是专门为View提供的动画,可以实现View的透明度、缩放、平移和旋转四种效果。

  • 2018-12-09 18:12:45

    显示软键盘,并让布局压缩

    博客 学院 下载 图文课 论坛 APP 问答 商城 VIP会员 活动 招聘 ITeye GitChat 搜博主文章 写博客传资源 原