I've created a page that has content showing & hiding based on the device orientation, however I find that there's somewhat of a jump/lag when you rotate and the content shows/hide.
Is it possible to animate a smoother transition between lelements showing/hiding using just css?
For the elements that animate in and out of view, you can use transition-property: all; and transition-duration: 1s; (or whatever duration you'd like) to fade in/slide in said elements. Of course those CSS properties will need to be prefixed in some browsers.
Related
I'm building an accessible accordion using a definition list. I have this working well, where the <dt> contains a <button> which when clicked toggles an aria-expanded from true/false and toggles a hidden attribute on the corresponding <dd>. There's other things going on for accessibility but that's the basics for the list and the show/hide.
The show/hide display of the dd is then controlled via a hidden attribute selector (in this case, this is coming from the bootstrap stylesheet):
[hidden] {
display: none!important;
}
The show/hide functionality right now is a hard show/hide and I'm trying to add a nice animation via css transitions (this needs to work in IE11 where transitions are supported.)
I built a simple POC for the animation at http://jsfiddle.net/jokvqy6u/ which just toggles a show and hide class. This was just something I could quickly throw together and send out to our marketing team to illustrate the animation to get feedback on.
I thought I'd be able to just easily add hidden and :not(hidden) selectors to the POC and it would work just fine, then I could retrofit into the real accordion, but the animation doesn't seem to work with hidden attributes on the html. You can see a demo of that at http://jsfiddle.net/6zmdhqrn/2/ where the 2nd item animates because it does not have a hidden attribute. Items 1 and 3 have hidden attributes and do not even open up.
Does anyone know why this is happening and how I can get my transitions working with hidden attributes?
EDIT I have it sort of half working at http://jsfiddle.net/6zmdhqrn/3/ by overriding the [hidden] selector coming from bootstrap with some important statements. I still get a hard show, but the hide slides up. I suspect it has to do with the element being display:none where the animations have no dimensions/info to start animating from? Still looking for info/tips on how to get the opening animation.
You guessed right, the problem here is display isn’t an animatable CSS property.
You need to base your animation on an animatable property, such as opacity for example.
Here’s a quick demo:
const el = document.querySelector('div');
document.querySelector('button').addEventListener('click', () => {
if (el.classList.contains('visible'))
el.classList.remove('visible');
else
el.classList.add('visible');
})
div {
opacity: 0;
transition: opacity 0.3s ease;
}
.visible {
opacity: 1;
}
<div class="visible">some content!</div>
<button>toggle visibility</button>
As you may have noticed, setting the opacity to 0 doesn’t hide the element completely (i.e. it still takes up space). In case this is something undesirable, you may consider animating a different property, such as width or height.
I am using a slider plugin (http://roundsliderui.com/) and added additional elements to have a custom fill image. In Chrome, the transitions that happen when the slider is clicked are not synchronized even though the settings are the same. It only seems to happen in Chrome, and is worse on mobile. I am targeting Android with the Crosswalk webview, so it will affect all users, especially slower phones.
The plugin has one element that rotates the handle, and I add one child to clip the fill image (.rs-range-clip-custom, no transform) with a child that rotates back to vertical to hold the fill image as a background (.rs-range-custom). It is very noticeable for the actual images, since the fill will either leave a gap at the end or extend past the end of the track depending on the direction it is moving.
.rs-animation .rs-transition {/* plugin css */
transition: all .5s linear 0s;
}
.rs-animation .rs-range-custom {/* my css */
transition: transform 0.5s linear;
}
You can view a simplified version of the slider at http://codepen.io/MalikDrako/pen/XjbaWR
How can I ensure the two animations are synchronized?
Here i have customized the roundSlider in sample level to achieve your requirement.
In the below demo i have added an additional SVG element as range to apply the image for that. Please check the below demo, which demonstrate your requirement:
http://jsbin.com/debiyu/edit?html,output
For better understanding I have applied some other png images in the below demo, check that:
http://jsbin.com/henola/1/edit?html,output
From here you can customize further based on your requirement. I hope this helps you.. Please let me know your comments.
I'm trying to do some nice transition either dynamically through d3 or using CSS for rects but I am having little lucky finding a good example of how to do so.
The idea is that I want to grow my bar chart from bottom to top when its being rendered.
The chart is rendered using Vega, which I don't believe has built in transitions yet, so I need other options to do outside of the library.
I attempted to use CSS animate, but it has some weird rendering issues and also goes top to bottom rather then bottom to top
rect {
animation: bar-fill 2s linear;
}
#keyframes bar-fill {
0% { height: 0; }
}
https://jsfiddle.net/zg2hnr2x/3/
Your CSS approach will currently only work in Chrome. height is not officially an attribute that can be animated with CSS (yet).
The reason that it grows from top to bottom is because the coordinate origin of SVGs is at the top-left, and so the x,y coordinate of a <rect> is also at the top left. The bottom right of a rect is at x+width,y+height.
If you need a cross-browser way to animate SVG elements then may want to look into one of the many JS SVG Animation libraries that are available.
I am trying to apply a Minecraft-like style to a div element. The end result should look something like the "if not ok then return end" message:
Quick sidenote: For those of you who haven't played the game, a random line from a specific file is read and it's contents are displayed as the message of the day. It throbs in and out and grabs your attention.
The text shadow, font, and throbbing animation has already been done. However, when I try to apply the second animation, it overrides the throbbing animation (meaning it does not throb, but is rotated)
My CSS is as follows:
#random-message {
/* font/text stuff */
animation:minecraft, minecraft-rotate 0.5s infinite;
-webkit-animation:minecraft 0.5s infinite; /* Safari and Chrome */
}
The animation minecraft applies a transform: scale effect, and minecraft-rotate applies a transform: rotate effect.
What would be the best way to implement a rotation effect without overriding my throbbing effect?
You don't want to have a rotation animation...you want to rotate the div. Simply add transform: rotate(340deg); line to the css block.
Any given element can have only one transform at any given time. Any attempt to set at the same time 2 transforms will result in one of them being overriden.
You can:
1) set two divs, one inside the other, and apply a different transform to the parent and to the child.
2) build the composite transform. In the case of an animation, that means creating composite transforms for each frame.
I'm trying to get my head wrapped around CSS3 transitions, and I'm not sure if there is something wrong with my understanding, or if the browsers aren't cooperating.
First of all, I thought Opera was supposed to have support for transitions, since version 10 or so, but neither transition nor -o-transition seems to do anything in 11.62. Or does Opera use a different syntax?
Anyway, I can make a background color fade in and out on hovering with most other browsers by writing
div {transition:background 2s;}
div:hover {background:lime}
OK so far, and I can also make it so that the background fades in, but not out, by writing
div:hover {transition:background 2s; background:lime}
and that the background fades out, but not in, like so:
div {transition:background 2s;}
div:hover {transition:background 0s; background:lime}
But I don't understand why that happens. According to the docs, a transition with a 0s duration isn't supposed to have any effect, so why does the last one have a different result?
jsFiddle
I assume what you are looking for is the ease timing function.
So your CSS rule should look something like this.
.class {
transition: property(ies) duration timing-function;
}
.class:hover {
property(ies): new value;
}
For Opera you have to define the exact property. In your case it wouldn't be the background property but the background-color property.
From your example it looks like it's behaving as I'd expect it.
The transitions run from one state to another.
I'll try an explain this as best I can.
On the last one you have a trasition of 2s on the <div> in its normal state and a a transition of 0s on the <div> in it's hover state.
So what is happening?
When you hover on the <div>, the state changes to :hover and so the transition for div:hover is run. You have a trasition of 0s so no animation is run.
When you remove the mouse from the <div> the state changes from :hover back to normal, and so the transition for div in its normal state is run. You have this at 2s.
Does this explain what is happening and how the transitions work?