I am trying to position an image inside a Swiper slider, and I need it to overflow the Swiper Container which has an overflow of hidden and display it on the bottom of another container. I am wondering is this possible to achieve?
see actual design
I have tried setting the Swiper Container to:
overflow: hidden;
and the .swiper-slide to:
.swiper-slide {
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
}
so when the next slide come into play I trigger it back with:
.swiper-slide-active {
opacity: 1;
visibility: visible;
}
sadly this method makes the scroll bar appear on the bottom of the page...
see screenshot example here
also I made a Codesandbox to keep the things simple see codesandbox example
Related
I have a card game where the player selects a card from one deck to add to a second. Pushing the button on the active card will move it to the other deck and then make it active. The active deck should be larger when in focus, while the inactive is minimized like so:
I have implemented it using the Swiper Coverflow effect in both SwiperJS and React-Swiper, but in either case the height is tied to the .swiper-slide CSS class. The width on this class is set to a fixed size which drives how the rest of the Swiper is rendered. It seems that the only way to change the slide width (and resulting Swiper height) is to apply fixed width classes to the slide based on state.
JSX:
<SwiperSlide
key={index}
className={
props.selected
? "swiper-fixed-width-300 "
: "swiper-fixed-width-100 "
}
>
CSS:
.swiper-fixed-width-100 {
width: 100px;
}
.swiper-fixed-width-300 {
width: 300px;
}
However this approach has no easing or transition like other interactions so it feels too abrupt. I would like to find a way to do the same using the Swiper API functions. How can this same interaction be achieved with the API or without manipulating the CSS class?
Example Sandbox
I would use transform: scale(0.3) on the parent (Deck) and keep the width of the slider at 300px.
JSX (Deck.js):
<div
className={
props.selected
? "Deck Deck-selected"
: "Deck Deck-unselected"
}
>
<SwiperSlide key={index} className="swiper-fixed-width-300">
CSS:
.Deck {
transition: transform 0.3s ease;
}
.Deck-selected {
transform: scale(1);
}
.Deck-unselected {
transform: scale(0.3);
}
.swiper-fixed-width-300 {
width: 300px;
}
Here is my sandbox with the effect transitioning.
If you want to change the size of the "decks" and maintain a smooth transition effect, I am thinking you could use the scale() transform function which is also a CSS solution.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()#examples
If you combine this with a CSS transition you can achieve the effect you mentioned.
Here is a blog post from thoughtbot.com that dives into using scale() and CSS transitions:
https://thoughtbot.com/blog/transitions-and-transforms
I'm using a Switch component from Material UI to expand/collapse elements in a list. And when seeing the page in Safari on iOS, I'm experiencing a ghosting issue where the switches in the next elements often remain visible after expanding an element. This is especially bad when using transitions. But when scrolling the ghost switches disappear and everything looks fine.
Is this a Material UI issue or something else? Anything I can do as a workaround?
https://codesandbox.io/s/material-ui-switch-ghost-issue-2ie26?file=/src/App.js
The Switch ripple animation and Item animation are flighting for resources to do the animations and Safari seems like it is not able to optimise the animation process.
Therefore, you can add will-change: transform; in Item css to notify browser there will be a transform event and be ready:
const Item = styled.div`
max-height: ${({ $isSelected }) => ($isSelected ? "20rem" : "2.5rem")};
will-change: transform;
transition: max-height 0.1s ease-out;
overflow: hidden;
background: gray;
margin-bottom: 0.2rem;
`;
The definition of will-change:
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
Workable codesandbox:
https://codesandbox.io/s/material-ui-switch-ghost-issue-forked-fgqqx
I want to re implement a tree component to improve its performance. I used the FixedSizeList from react-window. Its working relatively well. It can handle even 100,000 tree node.
My problem is, that I want to animate the little opening triangle of the tree node. The following css responsible for the animation:
.tree-branch::after {
content: '';
display: block;
width: 0;
height: 0;
margin-top: 1px;
margin-left: 23px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid rgba(0, 0, 0, 0.7);
opacity: 0.7;
position: absolute;
top: 0;
left: -36px;
transform: rotate(90deg);
animation-duration: 0.3s;
}
.tree-item-closed::after {
transform: rotate(0deg);
}
The animation does not works. Because at each open and close all of the list element divs re-rendering. Then I tried to add itemKey property for the list to help React reusing the divs.
<List
className="List"
height={height}
itemCount={flattenedData.length}
itemSize={32}
width={width}
itemKey={index => flattenedData[index].id} // key defined
>
{Row}
</List>
It does not work either. The divs are not updated instead the whole divs are re-rendered. Is there a proper solution for this problem? How can I prevent the re-rendering?
Here is the whole example: https://codesandbox.io/s/a-quick-react-tree-component-based-on-react-window-tyxnm
To prevent react-window from re-rendering every item in the list, you need to:
Memoize your row-rendering function
Move that function outside the scope of the parent function
Use the itemData prop to communicate between the parent component and per-row render function.
This is the strategy used in the react-window example sandbox here: https://codesandbox.io/s/github/bvaughn/react-window/tree/master/website/sandboxes/memoized-list-items
Here's an example using your code:
https://codesandbox.io/s/a-quick-react-tree-component-based-on-react-window-8psp0
There may be a simpler way to do it using useMemo but I couldn't figure that out.
If you examine the DOM nodes using Chrome dev tools, you'll see that DOM nodes are no longer being re-created for the entire tree when one node is expanded. This removes the flicker that you'd see before (in Chrome, but not in Firefox) when selecting a new node.
But there's also something else that's preventing your rotation animations from working properly. In the CodeSandbox example I linked above, I added some animations on the border properties to show how animation of some CSS properties is working, but animation of the transform CSS properties is not working. I suspect this problem has nothing to do with react-window, so you'll probably want to debug it separately to figure out why your transforms aren't animating but other properties are animating OK.
All:
Im pretty new to React, I wonder how can I implement a Header Menu + Side Menu component layout in React?
It should be something like:
Click the orange header menu item, according side menu(the dark grey part on the left, there is no the dark grey part shown initial, only show when click according item in the header menu) will show up, click same item again, it will slide left to toggle. And the content area will auto scale.
Any help about how to implement this will be appreciated, it does not have to be a total solution, somethign like how to click and side menu toggle slide out or how scale the right side when left side menu slide out, or something like that.
Thanks
Theres too much in this question to give a full answer. So I'm just going to give a simple layout design with no code. You should be able to write the code yourself with this setup as it should be very straight forward.
you need a main component that renders the Header, Sidebar and Content of the page.
the header main component needs to handle an open or closed state based on the header clicks. so header item onClick(this.props.onClick). the props.onClick is passed to the header component and the main component needs to capture that and set a state.
this.setState({sidebarOpen: !this.state.sidebarOpen}); this will sumulate a toggle effect on the state for the click. now when you render just set a className based on that state.
let sidebarClassname = this.state.sidebarOpen ? 'sidebar open' : 'sidebar';
let contentClassname = this.state.sidebarOpen ? 'content open' : 'content';
and pass that through on the render to your component.
<Sidebar className={sidebarClassname}
<Content className={contentClassname}
from here you should have the components rendering and the sidebar should be getting an active class when you click on the header. then you just need to style it
the layout itself should be fairly simple.
css
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
}
.sidebar {
position: absolute;
top: 60px;
left: -300px;
height: 100%;
width: 300px;
transition: left .3s ease-in-out;
}
.content {
position: absolute;
top: 60px;
left: 0;
right: 0;
height: 100%;
transition: left .3s ease-in-out;
}
that should be pretty straight forward. you need to position the sidebar out of the page and the content needs to fill the page
the cool part here is when you get an active class (i.e open) you should be able to adjust the left position to create the slide in effect (because we added the css transition on the left property.
.sidebar.open {
left: 0;
}
.content.open {
left: 300px;
}
Sample Fiddle
I am working on this project. I have an angular-google-map directive. I am overwritting defaults markers with labelClass.
CSS is working fine but does not hover.
.marker {
color: white;
border: 2px white solid;
border-radius: 50px;
text-align: center;
font-size: 20px;
letter-spacing: 0.1em;
font-weight: bold;
}
.marker:hover {
background-color: #C52183;
animation: pulse 1s;
}
/* ANIMATIONS */
#keyframes pulse {
50% {
transform: scale(4);
}
100% {
transform: scale(1);
}
}
If you check the example you can see an animation but not with real color. I sometimes get the real animation.
The full project is here.
pd: The problem can't be the animation, if i just try to change some css properties i dont get effect, so i think that the problem is with google maps and css.
I finally fixed this "bug".
The problem was on the MarkerWithLabel library but really isn't a bug, its just an impossibility (with this library). Checking the library we see :
// Set up the DIV for handling mouse events in the label. This DIV forms a transparent veil
// in the "overlayMouseTarget" pane, a veil that covers just the label. This is done so that
// events can be captured even if the label is in the shadow of a google.maps.InfoWindow.
// Code is included here to ensure the veil is always exactly the same size as the label.
this.eventDiv_ = document.createElement("div");
this.eventDiv_.style.cssText = this.labelDiv_.style.cssText;
I just modified the library so i don't create invisible div anymore and also i intercept events with real label. Now it's working under my requirements.
more info about the problem
demo working