❝结束
意味着新的开始
❞
前言
1 Drawer
过渡 transition
代码片段
<transition
name="el-drawer-fade"
@after-enter="afterEnter"
@after-leave="afterLeave">
...
</transition>
afterEnter() {
this.$emit('opened');
},
afterLeave() {
this.$emit('closed');
},
.el-drawer-fade-enter-active {
animation: el-drawer-fade-in .3s;
}
.el-drawer-fade-leave-active {
animation: el-drawer-fade-in .3s reverse;
}
技巧解析
❝动画除了animation，还有transition哦
❞
animation用from，to表示开始和结束
transition用enter和leave表示进入和离开
怎么知道是谁进入了，谁离开了呢？
给它一个名字啊
name="el-drawer-fade"
拼上名字，就可以进行动画处理了
当然，除了动画，还有动画事件
更多好玩了，等你来探索
进入/离开 & 列表过渡
「在Ta没来之前」
「你本来就是一个人」
参考链接
往期回顾
- 跟随Element学习Vue小技巧(1)——Layout
- 跟随Element学习Vue小技巧(2)——Container
- 跟随Element学习Vue小技巧(7)——Button
- 跟随Element学习Vue小技巧(8)——Link
- 跟随Element学习Vue小技巧(9)——Radio
- 跟随Element学习Vue小技巧(10)——Checkbox
- 跟随Element学习Vue小技巧(11)——Input
- 跟随Element学习Vue小技巧(12)——InputNumber
- 跟随Element学习Vue小技巧(13)——Select
- 跟随Element学习Vue小技巧(14)——Cascader
- 跟随Element学习Vue小技巧(15)——Switch
- 跟随Element学习Vue小技巧(16)——Slider
- 跟随Element学习Vue小技巧(17)——TimePicker
- 跟随Element学习Vue小技巧(18)——DatePicker
- 跟随Element学习Vue小技巧(20)——Upload
- 跟随Element学习Vue小技巧(21)——Rate
- 跟随Element学习Vue小技巧(23)——Transfer
- 跟随Element学习Vue小技巧(24)——Form
- 跟随Element学习Vue小技巧(25)——Table
- 跟随Element学习Vue小技巧(26)——Tag
- 跟随Element学习Vue小技巧(27)——Progress
- 跟随Element学习Vue小技巧(28)——Tree
- 跟随Element学习Vue小技巧(29)——Pagination
- 跟随Element学习Vue小技巧(31)——Avatar
- 跟随Element学习Vue小技巧(33)——Loading
- 跟随Element学习Vue小技巧(34)——Message
- 跟随Element学习Vue小技巧(36)——Notification
- 跟随Element学习Vue小技巧(37)——Menu
- 跟随Element学习Vue小技巧(38)——Tabs
- 跟随Element学习Vue小技巧(39)——Breadcrumb
- 跟随Element学习Vue小技巧(41)——Dropdown
- 跟随Element学习Vue小技巧(42)——Steps
- 跟随Element学习Vue小技巧(43)——Dialog
- 跟随Element学习Vue小技巧(44)——Tooltip
- 跟随Element学习Vue小技巧(45)——Popover
- 跟随Element学习Vue小技巧(48)——Carousel
- 跟随Element学习Vue小技巧(49)——Collapse
- 跟随Element学习Vue小技巧(50)——Timeline
- 跟随Element学习Vue小技巧(52)——Calendar
- 跟随Element学习Vue小技巧(54)——Image
- 跟随Element学习Vue小技巧(55)——Backtop
- 跟随Element学习Vue小技巧(56)——InfiniteScroll
