❝

The end of the

It means a new beginning

❞

preface


1 Drawer

Transition the transition

Code snippet

<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;

}

Copy the code

Skills parsing

❝

Animation also has transition. Animation starts and ends with from and to. Transition enters and leaves. How do you know who enters and who leaves? I’m going to give it a name name=”el-drawer-fade, “and I’m going to animate it and of course, there’s going to be animation events and there’s going to be a lot more fun for you to explore as you go in/out and list transitions

❞




“Before he or she arrives“ “You are alone“

Refer to the link

  • The element’s official website
  • Element repository
  • Vue website
  • ES6 Tutorial

Review past

  • Follow Element to learn Vue tips (1) – Layout
  • Learn Vue tips with Element (2) — Container
  • Learn Vue tips with Element (7) – Button
  • Learn Vue tips with Element (8) — Link
  • Learn Vue tips with Element (9) — Radio
  • Learn Vue tips with Element (10) — Checkbox
  • Learn Vue tips with Element (11) — Input
  • Learn Vue tips with Element (12) — InputNumber
  • Learn Vue tips with Element (13) — Select
  • Learn Vue tips with Element (14) — Cascader
  • Learn Vue tips with Element (15) — Switch
  • Learn Vue tips with Element (16) – Slider
  • Learn Vue tips with Element (17) — TimePicker
  • Learn Vue tips with Element (18) — DatePicker
  • Learn Vue tips from Element (20) — Upload
  • Learn Vue tips with Element (21) — Rate
  • Follow Element to learn Vue tips (23) – Transfer
  • Learn Vue tips with Element (24) — Form
  • Learn Vue tips with Element (25) — Table
  • Learn Vue tips with Element (26) – Tag
  • Follow Element to learn Vue tips (27) — Progress
  • Learn Vue tips from Element (28) — Tree
  • Learn Vue tips with Element (29) — Pagination
  • Follow Element to learn Vue tips (31) — Avatar
  • Follow Element to learn Vue tips (33) — Loading
  • Learn Vue tips with Element (34) — Message
  • Learn Vue tips with Element (36) — Notification
  • Learn Vue tips with Element (37) – Menu
  • Learn Vue tips with Element (38) – Tabs
  • Learn Vue tips with Element (39) — Breadcrumb
  • Learn Vue tips with Element (41) – Dropdown
  • Follow Element for Vue tips (42) — Steps
  • Learn the Vue tip (43) with Element — Dialog
  • Learn Vue tips (44) with Element — Tooltip
  • Learn Vue tips with Element (45) — Popover
  • Learn Vue tips with Element (48) — Carousel
  • Learn Vue tips with Element (49) – Collapse
  • Follow Element to learn Vue tips (50) — Timeline
  • Learn Vue tips with Element (52) — Calendar
  • Learn Vue tips with Element (54) — Image
  • Learn Vue tips with Element (55) — Backtop
  • Learn Vue tips with Element (56) — InfiniteScroll