kamilniemczycki/kamilcraft.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Removed transition

Browse Source
This commit is contained in:
Kamil Niemczycki 2021-08-29 14:39:06 +02:00
parent 0160dabf6a
commit c0a6f5ed41
1 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Navigation.vue
View File

@ -5,10 +5,8 @@
</router-link> </router-link>
<nav class="nav"> <nav class="nav">
<button class="nav-btn" @click="clickMenu"> <button class="nav-btn" @click="clickMenu">
<transition name="btn"> <font-awesome-icon v-if="!clicked" icon="bars"></font-awesome-icon>
<font-awesome-icon v-if="!clicked" icon="bars"></font-awesome-icon> <font-awesome-icon v-else icon="times"></font-awesome-icon>
<font-awesome-icon v-else icon="times"></font-awesome-icon>
</transition>
</button> </button>
<ul class="site-menu" :class="{'menu-clicked': clicked}"> <ul class="site-menu" :class="{'menu-clicked': clicked}">
<li v-for="menuItem in menuItems" :key="menuItem.slug" class="menu-element" @click="linkClicked"> <li v-for="menuItem in menuItems" :key="menuItem.slug" class="menu-element" @click="linkClicked">
@ -20,12 +18,6 @@
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.btn-enter-active, .btn-leave-active {
transition: opacity .5s;
}
.btn-enter, .btn-leave-to {
opacity: 0;
}
.container { .container {
display: flex; display: flex;
align-items: center; align-items: center;
@ -45,11 +37,13 @@
} }
&-menu-active { &-menu-active {
background-color: #EFEFEF; /* background-color: #EFEFEF; */
color: #8D8D8D; color: #8D8D8D;
animation: container-active-menu 500ms forwards ease-in-out;
div.logo { div.logo {
background-color: #F6F6F6; /* background-color: #F6F6F6; */
animation: logo-active-menu 500ms forwards ease-in-out;
} }
.nav { .nav {
.nav-btn { .nav-btn {
@ -122,6 +116,22 @@
justify-content: space-between; justify-content: space-between;
} }
} }
@keyframes container-active-menu {
0% {
background-color: transparent;
}
100% {
background-color: #EFEFEF;
}
}
@keyframes logo-active-menu {
0% {
background-color: white;
}
100% {
background-color: #F6F6F6;
}
}
</style> </style>
<script> <script>