<div id="abc">
<div id="bac" ngIf="show">
<!-- Content -->
</div>
<div id="cde">cds</div>
</div>
I have a div want to add or remove from DOM slowly(show and hide) using *ngIf and likewise adding or removing of div.id ="bac" should cause div.id='cde' to move left or right slowly like it is animating.
*ngIf probably is not he best thing you are looking for, instead of this, use ngClass and define the css transitions and positions for these animations.
*ngIf fully hides/shows a node from/in DOM, it's like display: none/block which is not able to be animated through css-transitions
here is an example
<div class="animated" [ngClass]=" { 'show': show, 'hide': !show }">
content
</div>
then in the css
.animated {
display: inline-block;
width: 100%;
height: 80px;
background: gray;
transition: 1.5s linear margin-left;
}
.animated.show {
margin-left: 0;
}
.animated.hide {
margin-left: -120vw;
}
Height also can be changed, depends on which effect you expect.
Here is stackblitz with working code
Related
I'm starting to learn a few basics with nuxt & vue.
I'm basically building a little list of elements that you can click and will expand with an image or some other content.
What I made so far
is an homepage with the list (like the first image)
and 3 other pages : /about, /projects, /contact
Here is the demo with images :
As soon as I click the first link, an image appears, and everything is moved down to the bottom. The URL is updated with the corresponding url (here, /about)
What I would like to achieve:
So far it's working fine and I can naviguate on my website.
But as the images suggests, I would like the differents elements of the menu to move with an animation to the bottom on the page transition to the different pages, it would take them (let's say) 2 seconds to go their next position in the next page.
It would look something like that : https://codepen.io/pbouigue/pen/KKVxbYa
when you click a dropdown menu like first videothe menu expends and everything is moved down.
The issue with that is that the url is not updated and considered to move to another page (in the case it should be exemple.com/first-video
<template>
<div class="container">
<transition-group name="list">
<nuxt-link to="about" key="about">First item - about</nuxt-link>
<img src="../assets/ours.png" alt="">
//these two remaining items should have an animation when they move to the bottom of the image
<nuxt-link to="projects" key="projects">Second item - projects</nuxt-link>
<nuxt-link to="contact" key="contact">Last item - contact</nuxt-link>
<transition-group>
</div>
</template>
<style >
img{
display: block;
width: 40%;
}
a{
display: block;
color: orangered;
font-family: 'Courier New', Courier, monospace;
}
</style>
and my /about :
<template>
<div class="container">
<transition-group name="list">
<nuxt-link to="about" key="about">First item - about</nuxt-link>
<nuxt-link to="projects" key="projects">Second item - projects</nuxt-link>
<nuxt-link to="contact" key="contact">Last item - contact</nuxt-link>
<transition-group>
</div>
</template>
<style >
img{
display: block;
width: 40%;
}
a{
display: block;
color: orangered;
font-family: 'Courier New', Courier, monospace;
}
</style>
Do you have any help on how to achieve that? Maybe there is an easier way to do it, but since I'm all new and learning by myself, I would have loved some clues or a little help.
I read about transition-group and this css, but somehow, I can't manage to make it work...
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
because actually this :https://vuejs.org/guide/built-ins/transition-group.html#move-transitions
does exactly what i would like to do : move elements down in an animation, but I would like this to happen on a page transition in order to have to url updated.
Maybe I should look for https://router.vuejs.org/guide/essentials/nested-routes.html ?
Im using vs-popup in order to display the contents when ever the button is clicked, but the size of vs-popup is fixed, and my contents looks clumsy, so I want someone to tell me how I can change width of the popup as per my requirement.
<vs-button class="btn" #click=" showModal=true" color="#7367F0" > Click me</vs-button>
<vs-popup class="helundo" title="How will i resize popup" :active.sync="showModal">
<div class="vx-row">
<div class="vx-col w-full md:w-1/2 mb-base">
<p> I want this content in the left</p>
</div>
<div class="vx-col w-full md:w-1/2 mb-base">
<p> I want this content in the right</p>
</div>
</div>
</vs-popup>
<script>
export default {
data () {
return {
showModal: false
}
}
}
</script>
<style>
<!-- what should I add in order to resize the popup -->
</style>
And the output I'm obtaining is sent below:
I want the popup bigger and it should be flexible such that what ever content I add must fit accordingly.
Please do help me, as I am unable to change the width of the popup, what ever I do it is same, but if I add too many contents the width increases for a extend and it becomes scrollable.
I found out the answer myself, i am posting so that it can help others. If you are using vuesax library you might find out _fixesVuesax.scss
so just place this code there:
.con-vs-popup {
z-index: 53000;
.vs-popup {
width: 200px !important; //You can change the width according to your content
height: auto;
}
.vs-popup--content {
width: auto !important;
padding: 1rem;
font-size: 1rem;
}
}
My PWA in a desktop browser is not really cool (because i don't have a lot of information to show).
And I would like to limit the width to 768px.
I tried many solutions, but i can't to change elements in position "fixed" like v-navigation, v-footer, v-dialog, ...
they are always 100% of the width of the browser.
I tried this in app.vue or in index.html:
html,body,#app {
max-width:768px !important;
overflow: hidden;
}
and last time I tried this in index.html:
#mytable {
width: 100%;
overflow: hidden;
}
#mytable td{
width:50%
}
<table id="mytable">
<tr>
<td>
<div id="app"></div>
</td>
<td>other half</td>
</tr>
</table>
But no solutions works.
Thanks for your help
Marco
Your problem seems you need different layout in function of screen size. You have several solutions from media queries to simple margin. Here I will explain how to do what you want with just margin.
I advise you to use a div to wrap your content and do not apply all your style in your #app container. Why ? Because you can imagine for instance that you want a top bar that take all the width and a content that take only 768px. If you make your layout in only one block this will be very complex. Separation in several block is a good strategy to have a modulabe UI. So we will use this template. You can make whatever you want in the .content div.
<div id="app">
<!-- Here we can imagine a top bar -->
<div class="content">
<!-- Display whatever you want -->
</div>
</div>
First you need to prepare your app container to display your application in all screen. I suggest this css :
html,body,#app {
overflow: hidden; // If content is large it will display scroll bar
height: 100vh; // Tell to your browser to take 100% of the available viewport height
}
Then you can define the css of the .content block :
.content {
max-width: 768px; // Max-width you want
height: 100%; // Take all the height available
margin: 0 auto; // Display div at the center
}
Here is an example: jsFiddle
If you are very interested in layout design, I strongly advise you to look into flex box and css grid.
I'm learning angular2 and looking to implement a collapsible sidebar, similar to https://almsaeedstudio.com/themes/AdminLTE/index2.html, in Angular 2? I tried looking up examples but couldn't find any. Can you provide examples or documentation for it?
You could use ng2-bootstrap:
https://valor-software.com/ng2-bootstrap/#/accordion
You can also check in the source code how it's implemented:
https://github.com/valor-software/ng2-bootstrap/tree/development/components/accordion
Since you want to do it with Bootstrap, you can do it with Bootstrap collapse.
http://codepen.io/zurfyx/pen/ygaGyb
The idea behind this solution is the following:
Have your collapsible content inside a specific class, we called it collapseMenu. We also need a class that will indicate whether it is hidden or not. Bootstrap already provides it for us collapse.
<li>Icon <span class="collapse collapseMenu">Home</span></li>
Next we need the toggler, the hamburger icon that is. It requires a data-toggle to indicate the class that it has to toggle on each click and a data-target to know the element(s) that has to target, collapseMenu.
<button data-toggle="collapse" data-target=".collapseMenu">Hamburger icon</button>
The CSS part is not a big deal, and you can do it in various ways. I like the CSS3 flexbox approach.
Our page (specifically .container), will be a flex with direction row.
.container {
display: flex;
flex-direction: row;
}
Then we'll set the right panel to take as much space as it can, so as when the content is toggled, it shrinks:
.main {
flex: 1;
}
Complete working version:
HTML
<div class="container">
<div class="left-panel">
<ul>
<li>Icon <span class="collapse collapseMenu">Home</span></li>
<li>Icon <span class="collapse collapseMenu">Contact</span></li>
</ul>
</div>
<div class="main">
<button data-toggle="collapse" data-target=".collapseMenu">Hamburger icon</button>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
ul > li {
display: block;
}
.collapse.in {
display: inline-block;
}
.container {
height: 100vh;
display: flex;
flex-direction: row;
padding: 0;
}
.left-panel {
background-color: grey;
}
.main {
background-color: black;
flex: 1;
}
Hey I have a little problem I have a full page header but when I zoom in or reduce the screen size and slide along. It is not full page width it just leaves white space. May css code goes a follow.
.header {
background:#242424 repeat-x;
color:#ffffff;
width:100%;
height:74px;
font-family: 'Karla', cursive;
font-weight:bold;
font-size:15px;
}
The problem is caused by your <div class="medium-cont"></div> tag.
You are setting its width to 1400px in CSS which is causing the problem.
You don't need to use this element, instead set the background image of .medium-back.
<div class="medium-back">
<div class="register"></div>
<div class="medium-cont"></div> <!-- Remove this line -->
</div>
Change your .medium-back style to this:
.medium-back {
background: #19D89B url(images/medium-content.png) no-repeat;
height: 475px;
margin: 0 auto;
}
Then remove any other width:100%; styles you have on the outermost elements.