View Post.js
render() { | |
/* ... */ | |
const { closeInverted, dragProgress } = this.state; // change the state | |
return ( | |
/* same code */ | |
// this will add the invert class | |
// when this.state.closeInverted is true | |
<div |
View Post.js
state = { | |
dragProgress: 0, | |
closeInverted: false, | |
}; | |
onScroll = () => { | |
/* same code */ | |
// handling close icon color | |
const threshold = scrollTop / CLOSE_INVERTED_THRESHOLD; |
View Post.scss
.close.invert { | |
background: #000; | |
&::after, | |
&::before { | |
background: #fff; | |
} | |
} |
View Post.js
executeEnteringTransition = (node, done) => { | |
/* same code */ | |
const { | |
height: heightFrom, | |
top: topFrom, | |
scale: scaleFrom, | |
...mainFrom | |
} = this.from; | |
const { height: heightTo, top: topTo, scale: scaleTo, ...mainTo } = this.to; |
View Post.js
getPreviewStyleAndPosition = () => { | |
const { top, width, height } = this.preview.getBoundingClientRect(); | |
const transformMatrix = window.getComputedStyle(this.preview).transform; | |
// transformMatrix is either 'none', or a string in the form of | |
// matrix(0.965, 0, 0, 0.965, 0, 0) | |
const scale = | |
transformMatrix.indexOf('matrix') === 0 | |
? parseFloat(transformMatrix.split(', ')[3]) |
View Preview.js
import React, { PureComponent } from 'react'; | |
import Pressure from 'pressure'; | |
const PRESSED_SCALE = 0.95; | |
// minimum scale applied to the preview node | |
export default class Preview extends PureComponent { | |
state = { force: 0 }; | |
timer = null; |
View Post.scss
.page-post { | |
&.post-exit, | |
&.post-enter { | |
.content, | |
.close, | |
.underlay { | |
opacity: 0; | |
} | |
.underlay { | |
transition-delay: 0; |
View Post.js
executeEnteringTransition = (node, done) => { | |
this.postStyler.set({ ...this.from, visibility: 'visible' }); | |
node.classList.add('post-enter-started'); // add this line | |
/* same code */ | |
complete: () => { | |
node.classList.remove('post-enter-started'); // add this line | |
done(); | |
} |
View Post.js
/* other imports */ | |
import browser from 'bowser'; // the browser import | |
/* ... */ | |
executeEnteringTransition = (node, done) => { | |
this.postStyler.set({ ...this.from, visibility: 'visible' }); | |
const hidePreview = () => (this.preview.style.visibility = 'hidden'); |
View Post.scss
.page-post .underlay { | |
position: fixed; | |
top: -10vh; | |
left: 0; | |
z-index: 0; | |
width: 100vw; | |
height: 120vh; | |
background-color: #fff; | |
transition: opacity 400ms ease; | |
&::before { |
NewerOlder