Browse Source

Changed Home component to a stateful class. Added boilerplate for animating.

1-animate-name-and-tagline-on-mount
Robby Zambito 1 week ago
parent
commit
4da3e63ea8
4 changed files with 37 additions and 15 deletions
  1. +5
    -0
      package-lock.json
  2. +1
    -0
      package.json
  3. +8
    -3
      src/App.vue
  4. +23
    -12
      src/views/Home.vue

+ 5
- 0
package-lock.json View File

@@ -2116,6 +2116,11 @@
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
"dev": true
},
"animate.css": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.0.tgz",
"integrity": "sha512-0aVcfWDeU9ykV6vjn1P67ZSs01jxoUQZCGaYbkk0SIIelIG8kUdLrIkua1+VabHfTtsSivDRMMn0ILPvZum2gw=="
},
"ansi-colors": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",


+ 1
- 0
package.json View File

@@ -13,6 +13,7 @@
"@fortawesome/free-regular-svg-icons": "^5.13.1",
"@fortawesome/free-solid-svg-icons": "^5.13.1",
"@fortawesome/vue-fontawesome": "^0.1.10",
"animate.css": "^4.1.0",
"buefy": "^0.8.20",
"bulma": "^0.9.0",
"core-js": "^3.6.5",


+ 8
- 3
src/App.vue View File

@@ -37,7 +37,13 @@
</template>
</b-navbar>
<div class="container">
<router-view/>
<transition
appear
name="view"
enter-active-class="animated zoomInRight"
leave-active-class="animated zoomOutLeft">
<router-view/>
</transition>
</div>
<footer class="footer has-text-centered">
<div class="container">
@@ -58,8 +64,7 @@
</template>

<style lang="scss">

// Import Bulma's core
@import "~animate.css";
@import "~bulma/sass/utilities/_all";
@import "@/styles/color_pallette.scss";
@import "@/styles/custom_bulma_style.scss";


+ 23
- 12
src/views/Home.vue View File

@@ -15,12 +15,20 @@
</figure>
</div>
<div class="column has-text-right">
<p class="is-size-1">
Robby Zambito
</p>
<p class="is-size-3">
Some tagline
</p>
<transition name="name-animation"
enter-active-class="animated slideInDown"
leave-active-class="animated slideOutDown">
<p v-if="this.$animated" class="is-size-1 has-text-weight-bold">
Robby Zambito
</p>
</transition>
<transition name="tagline-animation"
enter-active-class="animated slideInDown"
leave-active-class="animated slideOutDown">
<p v-if="this.$animated" class="is-size-3">
Some tagline
</p>
</transition>
</div>
</div>
</div>
@@ -32,16 +40,19 @@
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue';
import Vue from 'vue';

export default {
name: 'Home',
components: {
// HelloWorld,
},
};
export default class Home extends Vue {
animated = true;

mounted() {
this.$animated = true;
}
}
</script>

<style lang="scss" scoped>
@import '~animate.css';

#profile-image {
width: 30rem;


Loading…
Cancel
Save