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 {