Slide 1
Slide 1 text
Vue.js
Deep Dive Into
Transitions
Slide 2
Slide 2 text
Lorenzo
Girardi
Frontend Developer
CAFFEINA
www.giralo.me
Slide 3
Slide 3 text
PSST
WE’RE
HIRING
https://caffeina.com/jobs
Slide 4
Slide 4 text
INTRO
.01
Slide 5
Slide 5 text
Animations
Transitions
Differences Between
Slide 6
Slide 6 text
Transition
A transition occurs when
an element changes from
one state to another.
Slide 7
Slide 7 text
Animation
Animations can be made up of as many
in-between states, and offer more control
over how the states are animated.
Slide 8
Slide 8 text
?
When do we
NEED THEM
Slide 9
Slide 9 text
When to use
State changes
Component mounts
Page changes
UX Interactions
Slide 10
Slide 10 text
Don’t use animations
if they are not
helping anyone
Slide 11
Slide 11 text
COMP
ARE
.02
Slide 12
Slide 12 text
Angular
The main Angular modules for animations are
@angular/animations and @angular/platform-browser.
These dependencies are automatically added to your project.
https://angular.io/guide/animations
Slide 13
Slide 13 text
Considerations
Well documented
Timeline animations
No CSS transition support
3rd-party integration
Slide 14
Slide 14 text
React
The main React module for animations is the
react-transition-group and it’s available
as an npm package.
npm i react-transition-group
http://reactcommunity.org/react-transition-group/transition/
Slide 15
Slide 15 text
3rd-party integration
Playful JS hooks
CSS partial support
Difficult to extend
Considerations
Slide 16
Slide 16 text
?
What about
Vue.js API
Slide 17
Slide 17 text
TRANSI
TION
.03
Slide 18
Slide 18 text
How It Works
You can use transition by wrapping components:
Slide 19
Slide 19 text
Enter classes
opacity: 0 opacity: 1
v-enter v-enter-to
v-enter-active
Slide 20
Slide 20 text
Leave classes
opacity: 1 opacity: 0
v-leave v-leave-to
v-leave-active
Slide 21
Slide 21 text
HTML CSS
CSS-transition
Slide 22
Slide 22 text
DEMO
DEMO
https://codesandbox.io/s/143r23zx6l
Slide 23
Slide 23 text
HOOKS
.04
Slide 24
Slide 24 text
Enter hooks
opacity: 0 opacity: 1
@before-enter @after-enter
@enter
Slide 25
Slide 25 text
Leave hooks
opacity: 1 opacity: 0
@before-leave @after-leave
@leave
Slide 26
Slide 26 text
How It Works
Define your methods with transition attributes.
Slide 27
Slide 27 text
How It Works
The done callbacks are required for the enter and leave
hooks.
Slide 28
Slide 28 text
?
Why not
REUSE THEM
Slide 29
Slide 29 text
Reusable transition
Slide 30
Slide 30 text
Reusable transition
Slide 31
Slide 31 text
MODES
.05
Slide 32
Slide 32 text
How It Works
You can use mode attributes with conditional rendered or
dynamic components.
Slide 33
Slide 33 text
without mode
SECOND CARD
FIRST CARD
Slide 34
Slide 34 text
out-in mode
SECOND CARD
FIRST CARD
Slide 35
Slide 35 text
PAGE
ANIM
.06
Slide 36
Slide 36 text
How It Works
vue-router give us a dynamic component called router-view
that represents the current active component page.
Wrap it in a transition and start playing!
Slide 37
Slide 37 text
https://codesandbox.io/s/50v005o6xl
DEMO
DEMO
Slide 38
Slide 38 text
Per-route transition
vue-router allows us to define custom metas for each route.
Give a different transitionName into meta and watch it later!
Slide 39
Slide 39 text
?
What about
ANIMATIONS
Slide 40
Slide 40 text
Behind the idea
Page
beforeRouteLeave
beforeRouteEnter
Child 1
animateIn
animateOut
Child 2
...
Slide 41
Slide 41 text
Enter animation
Slide 42
Slide 42 text
Leave animation
Slide 43
Slide 43 text
https://codesandbox.io/s/w0mkj98mk8
DEMO
DEMO
Slide 44
Slide 44 text
RECAP
.07
Slide 45
Slide 45 text
Transition goals
Lean Bootstrap
Reusable transitions
CSS classes auto-apply
3rd-party friendly
Slide 46
Slide 46 text
Transition goals
Playful JS hooks
Transition modes
Well documented
Slide 47
Slide 47 text
Resources
https://vuejs.org/v2/guide/transitions.html
https://css-tricks.com/intro-to-vue-5-animations/
https://router.vuejs.org/guide/advanced/transitions.html
https://snipcart.com/blog/vuejs-transitions-animations
https://dev.to/denisinvader/mounted-and-beforedestroy-hooks-in-vuejs-functional-components-7bi
Slide 48
Slide 48 text
Share
KNOWLEDGE
Slide 49
Slide 49 text
THANK
.YOU