Vue.js and Webpack
Above left The page
heading and the subheading
can be styled next. The idea
here is to animate these as
the page loads
Above The most important
thing about landing pages,
or head sections of a
webpage, is the call to
action button.btn::after {
content: “”;
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all 0.4s;
}
.btn--white::after {
background: #fff;
}
.btn:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
.btn--animated {
animation: animateUp 0.6s ease-out 0.5s;
animation-fill-mode: backwards;
}
}
KEYFRAME ANIMATIONS
Animation on the web is getting more and more use
than ever before – even more than in the days of
Flash! Some of the animations we can do these days
using CSS, JavaScript and SVGs are amazing and fun!
So let’s not break the trend and add in some simple
animations to our Vue application using @keyframes.
The animation names have already been added to the
specific rules as we went along, so once you’ve added
these keyframes to the CSS and refreshed the page,
you will see how they look.
@keyframes animateLeft {
0% {
opacity: 0;
transform: translateX(-10rem);
}
80% {
transform: translateX(1rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes animateRight {
0% {
opacity: 0;
transform: translateX(10rem);
}
80% {
transform: translateX(-1rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}RECAP
We’ve just created a simple single-page application
using Vue.js and Webpack. We’re sure that now you
can see the usefulness of using single-page
components – even with this basic setup. With
regards to what Vue can do, we’re just touching the
surface and we’d encourage you to explore Vue.js
further. Things to look at are the ‘vue router’, ‘vuex’
and how you can do AJAX calls using ‘axios’. Then
you can start creating some really powerful
applications with this superb JavaScript framework.
It probably won’t be long before Vue.js becomes the
most popular JS framework.ģZlwk#uhjdugv#wr
zkdw#Yxh#fdq#gr/
zhġuh#mxvw#wrxfklqj#
wkh#vxuidfhĤ