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

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.


  • 2017-01-17 15:42:03

    vue-cli 发布(译)

    当我们真正开发一个应用的时候,我们不可避免的会用到一大堆的工具,模块化、预处理器、热模块加载、代码校验和测试。这些工具对于一个需要长期维护的大型应用是必须的,但是项目初始化将会是让人痛苦的事情。这就是为什么我们做了 vue-cli 。

  • 2017-01-19 00:45:56

    nodejs之process进程

    虽然node对操作系统做了很多抽象的工作,但是你还是可以直接和他交互,比如和系统中已经存在的进程进行交互,创建工作子进程。node是一个用于事件循环的线程,但是你可以在这个事件循环之外创建其他的进程(线程)参与工作。

  • 2017-01-19 01:05:32

    process对象

    process对象是Node的一个全局对象,提供当前Node进程的信息。它可以在脚本的任意位置使用,不必通过require命令加载。该对象部署了EventEmitter接口。

  • 2017-01-20 21:59:11

    WEBPACK DEV SERVER

    webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。

  • 2017-01-21 10:32:29

    Vue-cli proxyTable 解决开发环境的跨域问题

    和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名。