react-smooth-flow
Version:
Effortless React animations for entering, exiting, and updating elements
2 lines (1 loc) • 2.53 kB
CSS
#transitionRoot{position:absolute;top:0;right:0;bottom:0;left:0;min-height:100vh;overflow:hidden;pointer-events:none}.rsf-image{-webkit-user-select:none;user-select:none}.rsf-snapshotContainer{display:flex;position:absolute}.rsf-snapshotContainer .rsf-transformContainer{display:flex;padding:var(--borderTopWidth) var(--borderRightWidth) var(--borderBottomWidth) var(--borderBottomWidth)}.rsf-snapshotContainer .rsf-transformContainer>*{width:100%;height:100%}.rsf-snapshotContainer .rsf-transformContainer *{animation:none}.rsf-snapshotContainer.rsf-topLeft{top:0;left:0}.rsf-snapshotContainer.rsf-topLeft .rsf-transformContainer{transform:translate(calc(var(--borderLeftWidth) * -1),calc(var(--borderTopWidth) * -1))}.rsf-snapshotContainer.rsf-topCenter{top:0;left:calc(50% + (var(--borderRightWidth) - var(--borderLeftWidth)) / 2)}.rsf-snapshotContainer.rsf-topCenter .rsf-transformContainer{transform:translate(-50%,calc(var(--borderTopWidth) * -1))}.rsf-snapshotContainer.rsf-topRight{top:0;right:0}.rsf-snapshotContainer.rsf-topRight .rsf-transformContainer{transform:translate(var(--borderRightWidth),calc(var(--borderTopWidth) * -1))}.rsf-snapshotContainer.rsf-centerRight{top:calc(50% + (var(--borderBottomWidth) - var(--borderTopWidth)) / 2);right:0}.rsf-snapshotContainer.rsf-centerRight .rsf-transformContainer{transform:translate(var(--borderRightWidth),-50%)}.rsf-snapshotContainer.rsf-bottomRight{right:0;bottom:0}.rsf-snapshotContainer.rsf-bottomRight .rsf-transformContainer{transform:translate(var(--borderRightWidth),var(--borderBottomWidth))}.rsf-snapshotContainer.rsf-bottomCenter{bottom:0;left:calc(50% + (var(--borderRightWidth) - var(--borderLeftWidth)) / 2)}.rsf-snapshotContainer.rsf-bottomCenter .rsf-transformContainer{transform:translate(-50%,var(--borderBottomWidth))}.rsf-snapshotContainer.rsf-bottomLeft{bottom:0;left:0}.rsf-snapshotContainer.rsf-bottomLeft .rsf-transformContainer{transform:translate(calc(var(--borderLeftWidth) * -1),var(--borderBottomWidth))}.rsf-snapshotContainer.rsf-centerLeft{top:calc(50% + (var(--borderBottomWidth) - var(--borderTopWidth)) / 2);left:0}.rsf-snapshotContainer.rsf-centerLeft .rsf-transformContainer{transform:translate(calc(var(--borderLeftWidth) * -1),-50%)}.rsf-snapshotContainer.rsf-center{top:calc(50% + (var(--borderBottomWidth) - var(--borderTopWidth)) / 2);left:calc(50% + (var(--borderRightWidth) - var(--borderLeftWidth)) / 2)}.rsf-snapshotContainer.rsf-center .rsf-transformContainer{transform:translate(-50%,-50%)}