I am trying to position this sidebar just the opposite of what it is currently doing. I want the sidebar to come in from the right and stay right all through. not left.
this the sandbox link for you to reproduce - https://codesandbox.io/s/react-spring-sidebar-transition-forked-igmgr.
Thank you.
Position the sidebar to the right first.
.sidebar {
position: absolute;
right:0;
}
Change the transform to positive x direction
from: {
transform: "translateX(100%)"
},
enter: {
transform: `translateX(0)`
},
leave: {
transform: "translateY(100%)"
},
Related
I want to adjust the position of the floater for a particular step, I was trying to do:
floaterProps: {
styles: {
tooltip: {
top: -200
},
arrow: {
top:-200
}
}
But it is not working!
Is this the wrong way?
You need to use position: absolute in your tooltip and then adjust the position with top, bottom, left, right properties. more about positioning on MDN documentation.
tooltip: {
position: absolute,
top: 20px,
left: 10px,
}
If you are trying to use multi-tooltips in your application, you can also adjust their position in the Z axis by adding z-index property. more information on MDN documentation.
I have a Switch and a Router, and whenever the route changes, it goes from left to right, I would like to know if there's a simple way that the animation can go from right to left based on the change of the route. Thanks in advance.
https://codesandbox.io/s/page-transition-with-react-router-and-react-spring-b07jp
I found this example online and I would like to know how can it go from right to left when you click profile.
The solution has two part, You want to determine when do you want to reverse the motion. In this case you want to reverse it when you are on the profile page. location.pathname === "/profile-page"
Then you have to switch the direction based on this information. This was described in the other answer. The whole example can be something like this:
const { location } = useContext(__RouterContext);
const reverse = location.pathname === "/profile-page";
const transitions = useTransition(location, (location) => location.pathname, {
from: {
position: "absolute",
width: "100%",
opacity: 0,
transform: reverse ? "translate(-100%,0)" : "translate(100%,0)"
},
enter: { opacity: 1, transform: "translate(0%,0)" },
leave: {
opacity: 0,
transform: reverse ? "translate(50%,0)" : "translate(-50%,0)"
}
});
The position is controlled by the transform: 'translate(__)' in lines 46-49 of that code. You can read more about CSS transforms and the translate function on MDN.
All that you need to do to reverse the direction is to reverse the signs of the two percentages.
Change translate(100%,0) to translate(-100%,0) in the from style.
Change translate(-50%,0) to translate(50%,0) in the leave style.
So here is what I currently have:
It's happening because of the shadow headbox:
So how can I move my image upper? I've tried to implement this by doing so: marginTop: -30, or so:
transform: [{ translateY: -30 }], and here is what I'm getting:
Any solutions on this?
After using negative margin-top. Use position: relative; z-index: 1;
I am new to web development Trying to create a sliding page in angular ng-view but its not working as expected when the page two is entering its displaying below the page one till page one is available.please see the code here.
.slide.ng-enter{
transition-duration: 500ms;
transform: translateX(100%);
}
.slide.ng-enter-active{
transform: translateX(0%);
}
.slide.ng-leave{
transition-duration: 500ms;
transform: translateX(0%);
}
.slide.ng-leave-active{
transform: translateX(-100%);
}
I also need to make the page one slide from left to right.Can someone help me on this
I have added position: absolute to .slide. If that is acceptable in the project you are working then the below solution works fine. Please check the updated plunker.
.slide {
top: 0;
position: absolute;
width: 100%;
}
https://plnkr.co/edit/qC0YS2Gj3ddiNvuhjKzV?p=preview
This may be a very simple question for most of you, but I'm having a very difficult time figuring this out.
I have a data table that's big enough to run the entire screen. It's very specific so pagination is out of question. The issue that I'm having is with animation. I have the table inside div with ng-view. I want fadeInUp animation such that the fadeInUp seems to be from around 60-100px from the top. However, the current fadeInUp comes sliding up from the bottom of the screen which I do not want. How can I make it so that it slides up from the desired height?
<div ng-view class="content-wrapper ng-fadeInUp">
[ng-view].ng-enter{
animation:fadeInUp 1s;
}
This is what's making it slide up from the bottom of the screen. I tried using "Animate.css" which did the same thing. I want it so that it seems it's barely sliding up. Just a small hint of animation instead of the full slide up.
Take the original CSS from example animate.css and modify it:
#keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUp {
animation-name: fadeInUp;
}
Change the second parameter in translate3d to what you want, for example:
transform: translate3d(0, 20px, 0);
Demo: http://plnkr.co/edit/W5zsmhYkwXxYJbuft5pu?p=preview