Im browsing the net for more than a day now and still can't find a working solution to the followin problem.
A div should grow from nothing to 100% from the bottom up then
text should fade in
then a timeout
then text should fade-out
then div should schrink towards the bottom of the div and vanish.
.max{
max-height:100%;height:100%;color:#fff;
-moz-transition-property:max-height,height, color;
-moz-transition-duration:3s,3s,1s;
-moz-transition-delay:0s,0s,2s;
}
.min{
max-height:0%;height:0%;color:transparent;
-moz-transition-property:max-height,height, color;
-moz-transition-duration:3s,3s,1s;
-moz-transition-delay:1s,1s,0s;
}
how can I serialize max & min into one CssClass
If that's not possible how to do it in another way.
But that doesn't fly.
Anyone a nice idea or experience with this?
The transition can only work, if your start values and your end values differ.
Because your start values and end values don't differ ('you come from nothing and you go to nothing' (Always look on the bright side of life)) it is not possible in one CSS class.
What maybe possible is that you have two classes say appear and disappear and switch between them after a certain amount of time with javascript (setTimeout function)
Related
I am using border-image property to create styled components with 9-slice. Also I am using css transform: scale(x) property to scale down/up my elements based on screen sizes. The issue I am running into is that my 9-slice component looks fine when scale is set to a whole number like 1, 2, 3... but if its a float then the border shows 9-slice lines/gaps and I am having hard time fixing it.
I have tried setting different values for border-image-slice as well as the scale. Initially thought that it was causing this issue when the number after decimal point is odd but that was an odd thought anyway.
<div class="Primary-Back-Button" style="transform: scale(1.2);">
<button class="Primary-Button" id="">
<div class="Primary-Button-Content">Button</div>
</button>
</div>
Expected result would be to show no lines/gaps on the border when using scale or I would be willing to change how we scale the things too. I basically want to keep the same layout on a desktop app no matter what the screen size is. This is for a desktop game that I am working on and it uses JS on UI side.
Expected result when scale is a whole number which is set to 6 in this case:
Notice the lines when I set scale to 6.25
If anyone ever run into the same issue which is very unlikely but I did figure out a solution so I am gonna put it out there.
You will need to add perspective: 1px; to the root styles() and then wherever you are using transform: scale(x); make it transform: translateZ(0) scale(x);
I am still trying to understand why that works but at least works. And its CSS so there could be some magic involved.
When I close that expanding box, I would like the other list items to transition smoothly back to their original position and not jump like they are doing now. How can I achieve that, I have no idea how to tackle this problem.
Edit: The Listitems are an array of Components. The Expandable is toggled with an OnClickEvent, which changes a bool in the state and a conditional rendering quote, like this:
{this.state.expanded && <div> Expandable </div>
I got it to work the way I wanted by animating the height of the Expandable window. Just for future reference I am using the React CSSTransitionGroup to animate that Expandable.
Here is the result:
Still have to do some fine tuning though
If someone else finds a better solution though feel free to post it, since I learned you should try to avoid to animate any property, but: opacity, scale, position and rotation
I'm trying to use CSS transforms to make the center object in a carousel have more focus/attention. (Carousel is Slick.js)
Everything works great, except when I go from the last item back to the first item, there is a pause and a jump before the change appears.
What is causing this? How do I fix it?
https://jsfiddle.net/6d91cqoq/1/
//pseudo code
EDIT: It also happens going from the first to the last.
EDIT 2:
It's worth noting I took the idea from the Slick.js website: http://kenwheeler.github.io/slick/
On the page with the 'Center Mode' example, it is using transforms to do this exact thing. I cannot for the life of me figure out what is different, other than the target element.
EDIT 3: I did attempt to change my elements to H3 elements, as is in the sample. No change.
The cause for this is that Slick changes the DOM order of the slide elements when switching from "first to last". The transition doesn't kick in when dom elements are removed and added back... You can work around this by playing around with javascript and Slicks beforeChange and afterChange events instead of a pure CSS solution. I have made an example, although the example I made also slightly changes the effect (the center slide won't widen until it is in the center, e.g. afterChange). Maybe with Slicks, next and previous slide parameters you can make it work like your example, didn't have time to investigate it more.
https://jsfiddle.net/6d91cqoq/2/
Changes made to your example:
//Added my own "active" class, so it does not to interfere with slicks active class
.slick-slide.active {
opacity: 1;
transform: scale(1.50);
}
JS
//make current center active after initialization
$('.slick-center').addClass('active');
//before slide change, make all "inactive"
$('.center').on('beforeChange', function(event, slick, index){
$('.slick-slide').removeClass('active');
});
//after change make the center one "active"
$('.center').on('afterChange', function(event, slick, index){
$(slick.$slides[index]).addClass('active');
});
I have a series of objects all of which have different scaled value using the css 3 transform tag. My problem is that when I try to attach an animation on hover (in this case its a rotation) they return to their original/unscaled value i.e they all have the same size.
I am using a common keyframe animation for all the objects to save up on coding time and neatness.
Any hero has a solution?
Make sure that :
the keyframe does not have the scale property that set the scale rate back to 0.
You didnt miss a ; at the end of a line, and you didnt do any syntax mistake.
try to share your css code so we can find the problem.
So this is what I got:
http://mysite.com
Now when you press on the big fat blue button at the right with "Make An Appointment" a lightbox appears. Although this lightbox goes under the slideshow and the same with the menu, like the z-index is bigger than the lightbox. Although i have set the z-index to 999999 for the lightbox, and still it appears under them.
What should I do here?
The root of your problem is the placement of your modal-bg and modal-box.
They're both inside an element with the class "page-content-shadow" -- this class has both a position of relative and a z-index of 5. This means that even though you're setting the modal to have a z-index of 99999, that's only with the context of its parent element's z-index (which is 5 in this case).
To fix this all you have to do is change the z-index for the page-content-shadow class to 100. That will put it on top of both your nav and your slideshow (in Chrome at least).
I'm about to face a similar problem, but I've been ignoring it as best I can.
My plan, although it may not be perfect, is to run a script that will find the highest z-indexes on the page and decrement them by 1 so that my object can actually be on top.
Since you're using jQuery you could use a plugin like TopZIndex or you could simply inspect that plugin and borrow the code that makes $.topZIndex() work.
Once you have the objects with the highest z index you can mod their CSS to lower the value.
Using that plugin, the code would look like this:
var bastardObjects = $.topZIndex();
bastardObjects.css("z-index",999998);
EDIT: I'm sorry if I misunderstood, I thought you were saying that you had multiple objects with the maximum z-index and therefore they weren't playing together nicely.