I would like to animate the transition of a div's size (signupForm) whose content changes dynamically.
The size of the container div in each step is unknown.
I would prefer to do this in CSS.
I'm using Vue.js to swap out the forms.
<div class="signupForm">
<component id="currentView">
<FormOne></FormOne>
<FormTwo></FormTwo>
<FormThree></FormThree>
<FormFour></FormFour>
<FormFive></FormFive>
</component>
</div>
#signupForm never leaves, but FormOne gets swapped for FormTwo, etc.
I have added the following:
.signupForm {
max-height:inherit;
display:inline-block;
transition: max-height 0.3s ease-in-out;
}
But the transition property didn't help much. Any ideas?
I am not sure max-height has transform possibility, Maybe this helps:
.signupForm {
max-height:inherit;
display:inline-block;
transition: height 0.3s ease-in-out;
}
I think that the problem is with max-height: inherit;
Try to use some big value in px (5000px for example). The value that you think, you will never reach.
Related
I'm working in an Angular 9 app and I need to make an accordion menu. Everything works fine with my code except for the animation of the sub menus. I want to animate the content of a sub-menu item when display is change from'block' to 'none' and also animate it when is changing from 'block' to 'none'.
here is a couple of examples of what I need
https://codyhouse.co/demo/multi-level-accordion-menu/index.html
https://primer.fusepx.com/angular/
I also want to keep the code structure as much as possible. I just really need the content animation
Here is an stackblitz example with my code.
https://stackblitz.com/edit/angular-ivy-t6rbdp
Try this
.content {
padding: 10px;
background-color: blue;
height: 0 !important;
overflow-y: hidden;
transition: height 0.5s ease-in-out;
}
.content-open {
opacity: 1;
height: 100px !important;
}
As display which doest represent numeric values you cant do transition on that. So use properties like height.
I've implemented a CSS solution to animate a style that is set inline with the guidance from CSS-Tricks. Also used help from SO to have the text blend with CSS
I have the animation of the label going both ways (on load and reset) but the progress bar itself immediately goes to Zero
The width of the div gets set inline like this:
<div class="progress-black" ng-style="{width:progress}"></div>
And the onload animation is simple
.progress-black {
background: black;
animation: progress-bar .5s linear;
z-index: 2;
}
#keyframes progress-bar {
0% { width: 0; }
}
Here is my jsfiddle
It seems like #keyframe animations need a 100% value, which is set dynamically, so not sure how to express that in CSS.
My particular app has the ability for a user to click 'reset'. Is there a way to have the animation happen back to 0?
You have few problems in your code and there is two solutions for you:
first solution: - and the better one
in your case there is no need to use animation, its enough if you will use transition: width 2s; - and you should do that.
you checking if the value "exist" with if (scope.value) and when you reset the width of the progress remain as it was and not changed
you adding .zero class that color
see here
second solution:
1.. in your case there is no need to use animation, its enough if you will use transition: width 2s; - and you should do that.
2.. if you have zero class set .progress-black { width: 0 !important; } so the width will be 0 (important because you want it to be stronger then the inline css).
see here
I know that you can make hovering over a div affect the div directly after it with '+' and any div after it with '~'. But I have a situation where I need a div directly before and after the div I'm hovering over to be affected. What I am trying to do is have 4 circles grow on hover (which works fine), and the adjacent circles should be pushed aside.
Here is a codepen that may make it more apparent what I am trying to do:
http://codepen.io/anon/pen/Bojug
Here is a snippet of code with the issue.
#circ2:hover + #circ3{
margin: 100px 0px 100px 8%;
}
#circ2:hover ~ #circ1{
margin: 100px 2% 100px 13%;
background: blue;
}
As you can see, when you hover over circle number 2, circle number 3 is pushed aside but circle number 1 is not. Does anyone have a way around this. I know some of you may suggest JS or JQuery which I am not familiar with. In that case could you point me in the right direction? Also, I know there are many threads that address similar issues but I havent seen one that asks about affecting preceding divs. Thanks in advance!
From what I understood from your question I think you want to shift the preceding elements like the post elements.
If I am correct, just use the simple technique .Shift parent relatively on hover - >
#circles:hover{
position:relative;
right:40px;
}
Demo
Update with transition
#circles{
position:relative;
right:0px;
}
#circles:hover{
position:relative;
right:40px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
Demo 2
I'm too lazy to change youre code, since it's quite big, but the following idea should help:
You have
#circ2:hover + #circ3 //Affects circ3, when circ2 is hoverd
Now you want to affect #circ1, when circ2 is hoverd.
Try this:
#circ1 //Set the rules you want to see applied when circ2 IS hovered
#circ1 + :not(:hover) //Set the standard style here.
That way, since #circ2 isn't ususally hovered, you see the standard style. But as soon as you hover over it, the :not()-selector will no longer apply - and the hover styles will apply.
I have a question regarding links and divs. I want the whole div to be clickable and in the same time the text should be copyable, so that the google bots for example can read them as text.
Anybody got any ideas?
my code looks like this :
<div id="menubutton1"><br>
SOTNING</div>
#menubutton1{ width:149px; height:77px; float:left;margin-left:290px; text-align:center;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
#menubutton1:hover{
background-color: #F93;
cursor: pointer;
}
Your best bet is to create an anchor element, set that to display:block and position:absolute. See below:
<div id="menubutton1">
<p>You text which you want read by search engine bots.</p>
</div>
Add the following style
<style>
#menubutton1{
position:relative;
}
.fill{
position:absolute;
display:block;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
}
</style>
See fiddle.
The text won't be selectable directly from the DIV as the anchor block is floating over the top, but if selecting the page or from outside the DIV then the text can still be selected.
There's no evidence showing this will affect search bots reading the content as the content is still visible.
Alternatively you will need to use a JavaScript function to run on the click event and go to a specified link. This will however cause a problem for a search bot as they don't knowingly read/follow JavaScript. If you do choose the JS route I'd suggest having the link available on the page elsewhere too to ensure it is followed.
I am using php, html, and css to create a caption that displays the title first then sliding even more to reveal excerpt on hover.
Sample structure of basic post setup (simplified for clarity):
<div class="post-container">
<img src="postThumbnail.jpg" />
<span class="post-caption-container">
title
this is the excerpt
</span>
</div>
CSS file
.post-container{
position: absolute;
height: 200px;
width: 300px;
overflow: hidden;
}
.post-caption-container{
width: 300px;
height: 80px;
top: -45px;
}
.post-container:hover .post-caption-container{
top: 0px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
Inline HTML to override styling
<div id="post-container" style="height: 140px;">
<img src="postThumbnail.jpg" />
<span class="post-caption-container" style="height: 50px; top: -25px; ">
title
this is the excerpt
</span>
</div>
The portion where "style = top: -25px;" is causing problems.
My best guess is that the inline html styling "style= top: -25px;" is overriding values in both ".post-caption-container" and ".post-container:hover .post-caption-container", which is not what I want.
I need ".post-container:hover .post-caption-container" value to remain "top: 0px;".
I've spent about a week trying to resolve this issue, but I'm stuck! I don't know if this is impossible to achieve?
Any help would be appreciated. If this problem is impossible, perhaps an alternative method to achieve the same result, would love some different ideas as well! oi vey, thanks so much!
Positioning values like top: XXpx etc. don't work unless the element they are applied to also has a position set, such as position: relative, so perhaps try adding that in. I don't quite understand the example you are working with, but that might be all you need to get it working.
PS: Welcome to Stack Overflow. :-)
EDIT: In response to comments below, I now understand that the problem relates to an inline style overriding stylesheet declarations, and yes, inline styles carry more weight that stylesheet rules in the laws of the cascade.
However, there is one way to override the inline style, using !important:
.post-container:hover .post-caption-container{
top: 0px !important;
}
So, you place !important after the rule but before the semicolon. (Note also the period . before .post-caption-container above. You left it out, but without it the declaration won't work anyway.