Vue transition-group 组件实现类似 Google Keep 的延迟动画

最近在重构某项目，前端想模仿 Google Keep 来做。非常喜欢点搜索框之后卡片滑动进入的动画效果。

昨天研究了一晚才搞定。因为这次实在是没找到相关的文章，所以在这记录一下。

关于 transition 和 transition-group 组件的基本用法可以参考官方文档，写了很多特殊情况的用法。但是没有这种延迟的动画效果。

首先写一下动画各个阶段的样式。

1
.slide-enter-active {
2
  transition: all ease-out .22s; // 进入时为 0.22s 的滑入动画
3
}
4
.slide-leave-active  {
5
  transition: all 0; // 离开时直接消失
6
}
7
.slide-enter-to {
8
  opacity: 1;
9
}
10
.slide-enter {
11
  transform: translateY(100px);
12
  opacity: 0.3;
13
}

何时应用哪个类在文档中写的非常清晰。尤其是这个图一看就非常明了。

然后是模板部分。这里用两个单独的元素来举例子。省略了不重要的部分。

1
<transition-group
2
  tag="v-layout"
3
  name="slide"
4
  @after-leave="afterLeave"
5
>
6
  <v-flex key="date" v-if="card > 0">
7
    ...
8
  </v-flex>
9
  <v-flex key="color" v-if="card > 1">
10
    ...
11
  </v-flex>
12
</transition-group>

如果用v-for的话就是下面这样。

1
<div v-for="i in 10" key="i" v-if="card > i - 1"></div>

然后重点就在这里啦。其实就是通过延时来增加计数器。使得元素一个一个渲染啦。

1
export default {
2
  data() {
3
    return {
4
      card: 0,
5
    }
6
  },
7
  activated() {
8
    this.slideCard()
9
  },
10
  deactivated() {
11
    this.card = 0
12
  },
13
  methods: {
14
    slideCard() {
15
      if (this.card === 2) return
16
      this.toBeHide = this.card += 1
17
      setTimeout(this.slideCard, 200)
18
    },
19
  },
20
}

然后这样就可以保证组件激活的时候出现延迟进入的动画效果啦。如果组件没有keep-alive的话直接在created里调用slideCard就行了。

虽然这样就足够实现我萌想要的效果了。但是可以稍微引申一点点。我们想要重置动画的话，比如等所以卡片隐藏之后再重新来一遍。如果想知道卡片全部移除的话需要用一个计数器。因为事件里只有一个after-leave，并没有全部移除的事件。所以需要在after-leave事件里修改计数器来达到这个效果。

1
export default {
2
  data() {
3
    return {
4
      card: 0,
5
      toBeHide: 0,
6
    }
7
  },
8
  activated() {
9
    this.loadListColors()
10
    if (this.card === 0) this.slideCard()
11
    else this.card = 0
12
  },
13
  methods: {
14
    slideCard() {
15
      if (this.card === 2) return
16
      this.toBeHide = this.card += 1
17
      setTimeout(this.slideCard, 200)
18
    },
19
    afterLeave() {
20
      this.toBeHide -= 1
21
      if (this.toBeHide === 0) {
22
        this.slideCard()
23
      }
24
    },
25
  },
26
}

这就是最终的效果啦。

碎碎念：

我一个后端开发怎么搞 vue 来了呢 (⊙o⊙)? 这个项目的同步服务正在进行一个复杂的重构，等完全弄好了整理一下发个文章吧。

为什么 Google Keep 说改版就改版了。底色变的全白了好刺眼啊，还有各种难看的圆角。还是原来的好。

参考

https://cn.vuejs.org/v2/api/#transition-group https://codepen.io/dizzyluo/pen/yJLwWm