I am using angular 2 rc6 and I would like to have page transitions based on the route path. I am applying the following animation on two paths (as a test). I just want to animate the opacity and nothing else. But no matter what I do, I am unable to stop the page from translating on Y axis. The only option that I found which seemed to work is using style.position: absolute for host. I don't want to use that as that screws the position of all the elements on the page. I have also tried having just opactiy without the transform. That didn't work either.
host: {
'[#routeAnimation]': 'true',
'[style.display]': "'block'"
},
animations: [
trigger('routeAnimation', [
transition('void => *', [
style({opacity: 0, transform: 'translatey(0)'}),
animate('0.2s')
]),
transition('* => void', [
animate('0.2s', style({opacity: 0, transform: 'translatey(0)'}))
])
])
]
I am sure i am missing something here. not quite sure what? Thanks for the help.
1) As you can see you spelled transteY incorrectly the value of transform X or Y.
style({opacity: 0, transform: 'translatey(0)'}),
Should be uppercase like so:
style({opacity: 0, transform: 'translateY(0)'}),
2) Another thing I see in your code is that you binded your animation selector like so: [#routeAnimation]': 'true' if you used this selector exactly like this on your html you could never turn it on by toggling a boolean for example, try using a boolean like isMovingY = 'false' and place it in the selector like so [#routeAnimation]': isMovingY now when you toggle it with a click for example it could activate the "enter" / "leave" states you declared in the animation.
Related
I would like a simple wipe when hovering over a button. I figured out to use mouseOver to change the background on hover, but I am not sure how to create a wipe from one background to another.
I am aware of elm-simple-animation, but I am too new to Elm to understand the docs..
Thanks!
This is surprisingly involved and part of it is I suspect that a proper transition library specifically designed around elm-ui is (AFAICT) still missing.
The basics steps are like this:
Define properties for the start and mouseOver states.
Figure out which properties these correspond to in elm-simple-animation.
Add a transition for those.
Element.Input.button
[ Background.color (Element.rgb 0.5 0.5 0.6)
, Element.mouseOver
[ Background.color (Element.rgb 0.7 0.7 1)
]
, Transition.properties
[ Transition.backgroundColor 500 []
]
|> Element.htmlAttribute
]
{ onPress = Nothing
, label = Element.text "Hello"
}
You can see a working example here.
I need to implement a plotly.js chart on a page with a very restricted width. As a result, a tooltip is partially cut. Is it possible to cause tooltip not to be limited by plotly.js container size?
My code example at codepen: https://codepen.io/anatoly314/pen/gOavXzZ?editors=1111
//my single trace defined as following but it's better to see example at codepen
const yValue1 = [1000];
const trace1 = {
x: [1],
y: yValue1,
name: `Model 1`,
text: yValue1.map(value => Math.abs(value)),
type: 'bar',
textposition: 'outside'
};
It is, by design, not possible for any part of the chart to overflow its container.
I would say it is wrong to say that by design this is not possible! It is a bit hacky, but when you add the following lines, it shows the label outside of svg:
svg.main-svg,svg.main-svg *
{
overflow:visible !important;
}
The answer given by rokdd works. However the css selector should be more specific, otherwise it's natural that you will introduce subtle bugs (particularly if you need to scroll the content where the plotly chart is contained).
If we look at the DOM tree constructed by Plotly, we find that the tooltips are created inside the <g class="hoverlayer"></g> element (which is a direct child of one of the three <svg class="main-svg"></svg>). So that parent (that svg.main-svg element) is only one that needs to affected.
The ideal css selector in this case would be the :has selector. However it's still not supported (as of 2022): https://css-tricks.com/the-css-has-selector/
So the next simplest thing is to use a little bit of javascript right after we call Plotly.newPlot:
// get the correct svg element
var mainSvgEl = document.querySelector('#positive g.hoverlayer').parentElement;
mainSvgEl.style['overflow'] = 'visible';
Or in a more generic way (works for any chart):
Array.from(document.querySelectorAll('g.hoverlayer')).forEach(hoverEl => {
let mainSvgEl = hoverEl.parentElement;
mainSvgEl.style['overflow'] = 'visible';
});
I am working with ionic 2 application and facing the issue of flip animation.
I want to put a flip animation on ion-col (flip left and flip right), but the flip animation is not working sometimes.
I am referring the flip animation from below link-
Reference link - https://www.joshmorony.com/using-the-web-animations-api-in-ionic-2/
.html code
<ion-grid>
<ion-row>
<ion-col [#flip]="flipState" col-6
(swipe)="swipeEvent($event)">
</ion-col>
</ion-row>
</ion-grid>
.ts code
Set the animation first
animations: [
trigger('flip', [
state('flipped', style({
transform: 'rotateY(360deg)',
})),
transition('* => flipped', animate('500ms ease'))
]),
]
})
when swipeEvent method called
swipeEvent(ev) {
if ((ev.direction === 2 || ev.direction === 4)) {
this.flipState = 'flipped';
}
}
Try this one off of GitHub. This is the one I used as starting point
https://github.com/JesseSoldat/Flip-Card-Ionic-2.git
I see there is an option for transitionConfig to enter values such as the animation style or the duration. I was wondering if there was a way to change the color of the background during the transition (the semi-transparent background that appears during the transition)? For example, I have fairly dark screens and during the transition the background kind of flashes white.
Is this either configurable directly, or is it maybe a property of the parent navigator?
Thanks
I see during the transition process the area between the focussed screen and the edge of the screen goes from white with an opacity of 1 to transparent. Is it possible to maybe begin from another color such as black?
Try adding:
cardStyle: {
backgroundColor: 'white'
},
in your StackNavigatorConfig
I solved this issue by adding this to my StackNavigator:
cardStyle: {
backgroundColor: 'rgba(0,0,0,0)',
opacity: 1,
},
Now the transition is completely transparent. I tried using only opacity: 1 as suggested but it didn't work. I'm using "react-navigation": "^1.5.11".
If you are were a TabBarNavigator component then you can have a look at this part of the documentation to fix color problems during transitions.
If you combine swipeEnabled, animationEnabled and lazy properties you will get a better result in transitions. Otherwise, a gray/transparent color will be used during screens' transitions.
const tabNavigatorConfig: TabNavigatorConfig = {
...
swipeEnabled: true,
animationEnabled: false,
lazy: false,
...
};
I have a scrollview with fixed length in my RN project that should act like a parralax scroll behavior. When I scroll and move the Y component, the X component of the header is moving right so when it is on top, it is 56 pixels away from the left edge, leaving enough place for the back arrow.
But it is linear. Is there a way to make it exponential. The best example would be the WhatsApp contact's parralax scroll:
Watch the Title "Dune"
How I have it now = red line (linear)
How I would like to = blue line (linear with easing, exponential, whatever it's called)
I got the scaling animation done, but the linear motion is like a thorn in my eye and the documentation for Animated values is overwhelming and unclear a bit.
I've defined:
scrollY: new Animated.Value(0)
in state and in my scrollview like this:
<ScrollView
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
)}
and my Animated.View inside of it looks like this:
<Animated.View
style={[
{marginTop: 30, alignSelf: 'flex-start' },
{translateX: headerTranslateX}
]}]}>
<Text>Title</Text>
</Animated.View>
Aand the interpolation:
const titleTranslateX = this.state.scrollY.interpolate({
inputRange: [0, HEADER_SCROLL_DISTANCE*0.6, HEADER_SCROLL_DISTANCE],
outputRange: [0, 0, 56],
extrapolate: 'clamp',
})
which is linear in nature (i tried setting 10+keypoints in inputRange and outputRange bit but it gets messy and doesn't look natural enough)
Any advice on how to achieve the desired effect?
The only thing it says in the Animated docs on easing (function interpolation) is:
Interpolation
Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
It doesn't mention how you can add an easing function. However, in the source code you'll find this: https://github.com/facebook/react-native/blob/e2ce98b7c6f4f2fc7011c214f9edc1301ff30572/Libraries/Animated/src/Interpolation.js#L27
export type InterpolationConfigType = {
inputRange: Array<number>,
/* $FlowFixMe(>=0.38.0 site=react_native_fb,react_native_oss) - Flow error
* detected during the deployment of v0.38.0. To see the error, remove this
* comment and run flow
*/
outputRange: (Array<number> | Array<string>),
easing?: ((input: number) => number),
extrapolate?: ExtrapolateType,
extrapolateLeft?: ExtrapolateType,
extrapolateRight?: ExtrapolateType,
};
The easing function defaults to linear (t) => t, but you can make it any standard easing function. Here's a nice list: https://gist.github.com/gre/1650294
Note: this won't work if you're using useNativeDriver: true.
Hope this helps reduce the choppiness!