[front] transition nieskonczona
This commit is contained in:
monastyr
parent
eda56a43ec
commit
91ae736470
@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<sidenav-menu></sidenav-menu>
|
||||
<img src="./assets/logo.png">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
@ -14,12 +12,5 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,113 +1,16 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<h2>Essential Links</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://vuejs.org"
|
||||
target="_blank"
|
||||
>
|
||||
Core Docs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://forum.vuejs.org"
|
||||
target="_blank"
|
||||
>
|
||||
Forum
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://chat.vuejs.org"
|
||||
target="_blank"
|
||||
>
|
||||
Community Chat
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://twitter.com/vuejs"
|
||||
target="_blank"
|
||||
>
|
||||
Twitter
|
||||
</a>
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
<a
|
||||
href="http://vuejs-templates.github.io/webpack/"
|
||||
target="_blank"
|
||||
>
|
||||
Docs for This Template
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Ecosystem</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="http://router.vuejs.org/"
|
||||
target="_blank"
|
||||
>
|
||||
vue-router
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="http://vuex.vuejs.org/"
|
||||
target="_blank"
|
||||
>
|
||||
vuex
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="http://vue-loader.vuejs.org/"
|
||||
target="_blank"
|
||||
>
|
||||
vue-loader
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/awesome-vue"
|
||||
target="_blank"
|
||||
>
|
||||
awesome-vue
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="hello2">
|
||||
<sidenav-menu></sidenav-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Welcome to Your Vue.js App'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h1, h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,30 +1,155 @@
|
||||
<template>
|
||||
<div id="sidenav-menu" >
|
||||
<div id="burger-icon" v-on:click="isHidden=!isHidden">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<!-- <transition name="menu-popover">
|
||||
<div id="sidenav-menu" v-bind:class="overlay" v-bind:style="{'width': widthValue}">
|
||||
<div id="slide-element" v-on:click="changeWidth()">
|
||||
<div class='top_image'>
|
||||
<img id="menu-icon" src="../img//page-first.svg" v-if="show"/>
|
||||
<img id="menu-icon" src="../img//page-last.svg" v-if="!show"/>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div id="menu-links" v-show="!isHidden">
|
||||
</div>
|
||||
<div id="menu-links" v-if="show" >
|
||||
<div id="menu-links" class="overlay" v-if="show" >
|
||||
<ul>
|
||||
<li v-for="linkObj in menuLinks">
|
||||
<a v-bind:href="linkObj.address">{{linkObj.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</transition> -->
|
||||
|
||||
<div class="wrapper">
|
||||
<span class="label">+</span><div class="contents">
|
||||
<div class="inner">
|
||||
<div id="slide-element" v-on:click="changeWidth()">
|
||||
<div class='top_image'>
|
||||
<img id="menu-icon" src="../img//page-first.svg" v-if="show"/>
|
||||
<img id="menu-icon" src="../img//page-last.svg" v-if="!show"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-links" v-if="show" >
|
||||
<div id="menu-links" class="overlay" v-if="show" >
|
||||
<ul>
|
||||
<li v-for="linkObj in menuLinks">
|
||||
<a v-bind:href="linkObj.address">{{linkObj.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
/* Obrazek do menu*/
|
||||
|
||||
.wrapper {
|
||||
background:#DDD;
|
||||
display:inline-block;
|
||||
padding: 10px;
|
||||
height: 20px;
|
||||
width:auto;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.contents, .contents .inner {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.contents {
|
||||
white-space:nowrap;
|
||||
margin-left: -1em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.contents .inner {
|
||||
background:#c3c;
|
||||
width:0%;
|
||||
overflow:hidden;
|
||||
-webkit-transition: width 1s ease-in-out;
|
||||
-moz-transition: width 1s ease-in-out;
|
||||
-o-transition: width 1s ease-in-out;
|
||||
transition: width 1s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.wrapper:hover .contents .inner {
|
||||
|
||||
width:100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.top_image {
|
||||
/* width:950px;
|
||||
background-color:white;
|
||||
margin: 0px auto 0px auto;
|
||||
background:red; */
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.top_image img {
|
||||
margin: 0px auto 0px auto;
|
||||
}
|
||||
/*------------- Obrazek do menu -------------*/
|
||||
|
||||
.overlay {
|
||||
width: 50px;
|
||||
height: 90vh;
|
||||
background-color: red;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-active {
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
.fade-enter-to {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.fade-leave {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.fade-leave-active {
|
||||
transition: opacity 2s;
|
||||
}
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.overlay #slide-element{
|
||||
background: rebeccapurple;
|
||||
position: relative;
|
||||
top: 95%;
|
||||
|
||||
}
|
||||
|
||||
/* wystylizowanie calosci */
|
||||
#sidenav-menu{
|
||||
/* wystylizowanie calosci */
|
||||
position: left;
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
height:100vh; /**/
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#burger-icon div{
|
||||
@ -37,26 +162,49 @@
|
||||
|
||||
#menu-links ul li a{
|
||||
background-color: yellow;
|
||||
height:100vh; /**/
|
||||
|
||||
}
|
||||
|
||||
/* Animacja opóźnienia */
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .5s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
#slide-element{
|
||||
position: relative;
|
||||
top: 0%;
|
||||
height: 5%;
|
||||
background-color: grey
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sidenav-menu',
|
||||
data(){
|
||||
return{
|
||||
isHidden :false//false
|
||||
data () {
|
||||
return {
|
||||
show: false,
|
||||
widthValue: 30
|
||||
}
|
||||
},
|
||||
created:{
|
||||
widthValue: 30
|
||||
},
|
||||
methods:{
|
||||
changeWidth(){
|
||||
this.show = !this.show;
|
||||
if (this.show){
|
||||
console.log(this.show);
|
||||
this.widthValue = '20%';
|
||||
}
|
||||
else{
|
||||
console.log("False: ",this.show);
|
||||
this.widthValue = '5%';
|
||||
|
||||
|
||||
}
|
||||
console.log(this.widthValue);
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
computed:{
|
||||
menuLinks(){ //linki do menu głównego
|
||||
|
||||
1
frontend/app/src/img/graphql.svg
Normal file
1
frontend/app/src/img/graphql.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,5.37L11.56,5.31L6,14.9C6.24,15.11 6.4,15.38 6.47,15.68H17.53C17.6,15.38 17.76,15.11 18,14.9L12.44,5.31L12,5.37M6.6,16.53L10.88,19.06C11.17,18.79 11.57,18.63 12,18.63C12.43,18.63 12.83,18.79 13.12,19.06L17.4,16.53H6.6M12,22A1.68,1.68 0 0,1 10.32,20.32L10.41,19.76L6.11,17.21C5.8,17.57 5.35,17.79 4.84,17.79A1.68,1.68 0 0,1 3.16,16.11C3.16,15.32 3.69,14.66 4.42,14.47V9.36C3.59,9.25 2.95,8.54 2.95,7.68A1.68,1.68 0 0,1 4.63,6C5.18,6 5.66,6.26 5.97,6.66L10.38,4.13L10.32,3.68C10.32,2.75 11.07,2 12,2C12.93,2 13.68,2.75 13.68,3.68L13.62,4.13L18.03,6.66C18.34,6.26 18.82,6 19.37,6A1.68,1.68 0 0,1 21.05,7.68C21.05,8.54 20.41,9.25 19.58,9.36V14.47C20.31,14.66 20.84,15.32 20.84,16.11A1.68,1.68 0 0,1 19.16,17.79C18.65,17.79 18.2,17.57 17.89,17.21L13.59,19.76L13.68,20.32A1.68,1.68 0 0,1 12,22M10.8,4.86L6.3,7.44L6.32,7.68C6.32,8.39 5.88,9 5.26,9.25L5.29,14.5L10.8,4.86M13.2,4.86L18.71,14.5L18.74,9.25C18.12,9 17.68,8.39 17.68,7.68L17.7,7.44L13.2,4.86Z" /></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
frontend/app/src/img/page-first.svg
Normal file
1
frontend/app/src/img/page-first.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z" /></svg>
|
||||
|
After Width: | Height: | Size: 370 B |
1
frontend/app/src/img/page-last.svg
Normal file
1
frontend/app/src/img/page-last.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z" /></svg>
|
||||
|
After Width: | Height: | Size: 367 B |
1
frontend/app/src/img/pan-horizontal.svg
Normal file
1
frontend/app/src/img/pan-horizontal.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M7,8L2.5,12L7,16V8M17,8V16L21.5,12L17,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z" /></svg>
|
||||
|
After Width: | Height: | Size: 405 B |
1
frontend/app/src/img/view-headline.svg
Normal file
1
frontend/app/src/img/view-headline.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M4,5V7H21V5M4,11H21V9H4M4,19H21V17H4M4,15H21V13H4V15Z" /></svg>
|
||||
|
After Width: | Height: | Size: 348 B |
1
frontend/app/src/img/wrap-disabled.svg
Normal file
1
frontend/app/src/img/wrap-disabled.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M16,7H3V5H16V7M3,19H16V17H3V19M22,12L18,9V11H3V13H18V15L22,12Z" /></svg>
|
||||
|
After Width: | Height: | Size: 357 B |
1
frontend/app/src/img/wrap.svg
Normal file
1
frontend/app/src/img/wrap.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M21,5H3V7H21V5M3,19H10V17H3V19M3,13H18C19,13 20,13.43 20,15C20,16.57 19,17 18,17H16V15L12,18L16,21V19H18C20.95,19 22,17.73 22,15C22,12.28 21,11 18,11H3V13Z" /></svg>
|
||||
|
After Width: | Height: | Size: 450 B |
@ -9,7 +9,7 @@ export const store = new Vuex.Store({
|
||||
menuLinks: [
|
||||
{name: '1', address: 'https://www.google.com/'},
|
||||
{name: '1', address: 'https://www.google.com/'},
|
||||
{name: '1', address: 'https://www.google.com/'},
|
||||
{name: '9090', address: 'https://www.google.com/'},
|
||||
{name: '1', address: 'https://www.google.com/'},
|
||||
{name: '1', address: 'https://www.google.com/'},
|
||||
{name: '1', address: 'https://www.google.com/'},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user