I've been reading the official docs for React Animations (React CSS Transition Group), but I'm a little unclear as to what the timeout values are used for - especially when I'm setting transitions within my CSS. Are the values a delay, duration of the animation, or how long that class is applied before being removed? And how do they relate to the duration of transitions set in my CSS?
For example, if I were to have a simple fade in/out when the component enters/leaves, I'd also set the opacity and transition duration within my CSS. Does the component then animated based on the timing passed in this value or the duration set within my CSS?
Here's an example provided by the official docs:
My React Component
<ReactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}
>
{items}
</ReactCSSTransitionGroup>
My .css file
.example-enter {
opacity: 0.01;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
Thanks!
See my answer here: https://stackoverflow.com/a/37206517/3794660
Imagine you want to fade out an element. The durations are needed because React must wait for the CSS animation to complete before adding/removing the classes and finally removing the element. Otherwise you won'd be able to see the full animation, as the DOM element would be removed immediately.
https://github.com/facebook/react/blob/master/src/addons/transitions/ReactCSSTransitionGroupChild.js#L97
If you have a look at this code here: https://github.com/facebook/react/blob/v15.3.2/src/addons/transitions/ReactCSSTransitionGroupChild.js#L95 you can see how React used to try and calculate the timeouts for you. Now that's been deprecated and you're supposed to explicitly tell React the duration of your CSS animations (presumably because guessing has some major overhead/inconsistency.
From the page you linked:
You'll notice that animation durations need to be specified in both the CSS and the render method; this tells React when to remove the animation classes from the element and -- if it's leaving -- when to remove the element from the DOM.
Related
I know I can use hoverOpenDelay={0} and hoverCloseDelay={0}, but there is still a 100ms opacity transition on the popover container that I'm unable to change, as far as I can tell. I would like to remove this transition so the popover appears instantly.
Thank you for your help!
This is quite hard. Blueprint uses the react-addons-css-transition-group library that adds -enter, -appear, -leave, -enter-active, -appear-active, -leave-active suffixes to some class names of elements that need to be animated. In your case you probably need to manually override the overlay styles e.g. something like this:
.pt-overlay-enter,
.pt-overlay-appear {
opacity: 0;
}
.pt-overlay-enter-active,
.pt-overlay-appear-active {
opacity: 1;
transition-property: opacity;
// `step` didn't work cross browser for me
transition-timing-function: ease;
// i've found 0ms is causes react-addons-css-transition-group to fire events unreliable on certain browsers
transition-duration: 1ms
transition-delay: 0;
}
Of course, you'll want to narrow the scope of these rules to only to apply to popovers for which you want to remove animations.
If you want to see exactly what blueprint is doing to style the animation lifecycle classes, check out the styles here. The react-transition mixin is used here (among other places).
I'm trying to reposition the PanPanel and ZoomPanel controls on my map to the bottom left corner rather than the top left. I see that I can add options, but as much as I've tried, I can't find a way to tell it to stay to the bottom left, even when the window is resized.
I am also not sure how I will tell them to stack like they do normally when I tell them to reposition relative to the bottom left.
I changed the images that make up both panels, so now there's a bit more room between pan and zoom panels than I want, so I'm also trying to get them to come closer to each other.
On top of looking into using options on the controls, I also tried creating a style for the id of the div that surrounds both panels, but the value of the id in the div is "OpenLayers.Map_2_OpenLayers_Container", which contains a '.'. Far as I know, that's not a legal id for styling. Anyway, it didn't work. On top of which I don't think I can trust the name to always be the same, with continued work on this page causing a lot of additions over time.
Any ideas?
Try:
new OpenLayers.Control.YourControlXXXX({
moveTo: function (px) {
if ((px != null) && (this.div != null)) {
this.div.style.left = yourLeft + "px";
this.div.style.bottom = (yourBottom+controlHeigth) + "px";
}
},
... other options
})
ummm! I see that these controls are more modern than I thought, are positioned by CSS so try:
.olControlPanPanel {
bottom: 55px; /* not 0px */
top: auto;
}
NOTE: try as: div.olControlPanPanel {... to force the priority of CSS if you are not sure where position are loaded de css of OL.
So I found the problem. First I wasn't setting top to auto. Since it was set in the style.css file to 10px, and when I changed it in the style.css file it to auto the bottom worked. But then my css file wasn't working. I found an OpenLayers example for Pan and Zoom, and eventually found that the difference between what I was doing and what they were doing was that I hadn't loaded the style.css file explicitly at the beginning of the page. So it seems that the OpenLayers Map, when it is created, causes the style.css file to be read late, after my css was read, and so it overrode my override. When I did an early load (beginning of the page) it worked perfectly.
Seems that the attribution control, created when I create a map Layer, must read the current CSS, since the map hasn't yet been created on the page, and so it never needed for me to do the early load. If I remove the early load, it still takes the changes made from my css file. But removing the early load causes the Pan and Zoom controls to no longer respond to my changes, so I assume this means that the Map object is reading the styling after the late load of the style.css file, which at that point has already overridden my css.
Go figure...
Just in case this might be of use to anyone else. I'm using OpenLayers 3 and I wanted to move the zoom controls to the righthand side of the map. My map is attached to an element with a 'tm-openlayers-map' class value and to move the zoom controls I used the following css/sass
.tm-openlayer-map
//change the colour of the map buttons
button {
background: $title-bar;
}
.ol-zoom {
top: 0.5em;
right: 0.5em;
left: auto;
//move the tooltips to the left of the now right aligned buttons
.ol-has-tooltip:hover [role=tooltip] {
left: -5.5em;
border-radius: 4px 0 0 4px;
}
.ol-zoom-out.ol-has-tooltip:hover [role=tooltip]{
left: -6.2em;
}
}
//make sure the rotate controls included by default with an opacity of 0 don't
//block clicks intended for the '+' button
.ol-rotate {
visibility: hidden;
}
}
I have a CSS transition set up on an element, with all properties being affected. I don't know ahead of time which CSS properties will change, so I have no choice but to use "all" despite the performance issues.
.a {
transition: all 0.5s ease-in-out;
}
However, I want a specific property to have its own transition settings different from every other property:
.a {
transition: all 0.5s ease-in-out, margin-top 5s linear;
}
According to the W3C grammar for transition-property, other values should be allowed after 'all' is specified.
However, this doesn't seem to work in Firefox (18) and Opera (12). It works correctly in Chrome/Safari (with prefix) and IE10.
Here's a fiddle demonstrating the behavior: http://jsfiddle.net/F7tb5/3/
Is there a way to get this to work in all modern browsers without manually enumerating all properties that could possibly change?
That is a bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=835007 (similar question: 14533519 but was recently fixed for the Firefox 21 milestone. Until then, you can't use all as part of multiple transitions and have to specify every property separately.
To be fair though, only the most recent W3C draft explicitly states this behaviour; earlier versions were not very clear how this case should be handled.
I had a similar case and the work-around was to create a wrapper element that animates all properties that are known before and leave all for the actual elements:
.wrap.a {
transition: margin-top 5s linear;
}
.wrap.a .inner {
transition: all 0.5s ease-in-out;
}
I have a div element which acts as a global contianer for my webpage, I also have a div element inside this which I use as a curtain i.e. when it is activated it covers the whole page in a dark semi transparent layer (just like a lightbox) so the page is essentially deactivated and a warning dialog or picture box, etc, etc can be displayed on top.
I can achieve this efect and functionality easily with javascript but I wanted to know whether it could be achieved purely with css animations?
<div id='globalCon'>
<div id='curtain' class='enabled'></div>
<div id='contentA'></div>
<div id='contentB'></div>
...
</div>
so when curtain is not active it should have opacity 0 and prefferably be display:none; to keep it out of the way. Then when it is activated it should have display:block and opacity animate to 0.8. Then when it is deactivated, opacity should animate back to 0 and then it should be set back to display:none;
Like I say, I can do this easily with javascript, I just want to know if and how it can be done with css only?
You can use:
animation-fill-mode: none/backwards/forwards/both;
The ‘animation-fill-mode’ property defines what values are applied by
the animation outside the time it is executing
From the Spec.
Lets say I have a div element, with a background in position: 0%; how would I change the position to e.g position: 100%; but with keyframes on hover
I can't seem to use keyframes properly, it never works and I have all the latest browsers.
Thanks.
If you just want to animate background position on hover it's a lot easier to use a transition instead of keyframe animations. See this fiddle for an example: http://jsfiddle.net/hfXSs/
If you want to put in the extra effort of making it an animation you'll have to set the animation-play-state on the div to 'paused' and change it to 'running' on hover. See the spec on pausing animations here: http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-
EDIT: I was bored so here's the same thing using keyframe animations: http://jsfiddle.net/wGRg5/
Obviously, the fiddle has the problem that when you aren't hovering over the div the animation pauses which is probably not the desired effect.
Some Code, looks like webkit only at this point in time.
.box {
display:block;
height:300px;
width:300px;
background:url('http://lorempixum.com/300/300') no-repeat;
background-position:-300px;
-webkit-transition:background-position 1s ease;
}
.box:hover{
background-position:0px;
}
Via: http://jsfiddle.net/hfXSs/
More here: http://css-tricks.com/parallax-background-css3/