Skip to content

Commit 27e578e

Browse files
author
awn_lunchon
committed
simple css animations completed
1 parent 5a9ed7b commit 27e578e

File tree

5 files changed

+148
-7
lines changed

5 files changed

+148
-7
lines changed

‎public/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
-->
1111
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
1212
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
1314
<!--
1415
Notice the use of %PUBLIC_URL% in the tags above.
1516
It will be replaced with the URL of the `public` folder during the build.
@@ -20,6 +21,7 @@
2021
Learn how to configure a non-root public URL by running `npm run build`.
2122
-->
2223
<title>React App</title>
24+
2325
</head>
2426
<body>
2527
<noscript>

‎src/App.css

Lines changed: 72 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
.fade-enter.fade-enter-active {
2-
opacity: 1;
3-
transition: opacity 3000ms ease-in;
4-
}
5-
61
.fade-enter {
72
opacity: 0.01;
83
}
@@ -18,5 +13,76 @@
1813

1914
.fade-exit.fade-exit-active {
2015
opacity: 0.01;
21-
transition: opacity 800ms ease-in;
16+
transition: opacity 3000ms ease-in;
17+
}
18+
19+
.fade-out {
20+
opacity: 0 !important;
21+
transition: opacity 3000ms ease-out !important;
22+
}
23+
.scale-out {
24+
transform: scale(1.3);
25+
transition: all 3000ms ease-out !important;
26+
}
27+
28+
.slide-right {
29+
animation: slide-right 1000ms ease-in forwards;
30+
}
31+
@keyframes slide-right {
32+
from {
33+
transform: translateX(100%);
34+
}
35+
to {
36+
transform: translateX(0%);
37+
}
38+
}
39+
40+
41+
.slide-left {
42+
animation: slide-left 1000ms ease-in forwards;
43+
}
44+
@keyframes slide-left {
45+
from {
46+
transform: translateX(-100%);
47+
}
48+
to {
49+
transform: translateX(0%);
50+
}
51+
}
52+
53+
54+
.slide-bottom {
55+
animation: slide-bottom 1000ms ease-in forwards;
56+
}
57+
@keyframes slide-bottom {
58+
from {
59+
transform: translateY(100%);
60+
}
61+
to {
62+
transform: translateY(0%);
63+
}
64+
}
65+
66+
.slide-top {
67+
animation: slide-top 1000ms ease-in forwards;
68+
}
69+
@keyframes slide-top {
70+
from {
71+
transform: translateY(-100%);
72+
}
73+
to {
74+
transform: translateY(0%);
75+
}
76+
}
77+
78+
.flip {
79+
animation: flip 2s ease-out alternate 2;
80+
}
81+
@keyframes flip {
82+
from {
83+
transform: rotateY(0deg);
84+
}
85+
to {
86+
transform: rotateY(180deg);
87+
}
2288
}

‎src/App.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Page1 from './PageTransition/FirstPage';
99
import Page2 from './PageTransition/SecondPage';
1010
import Page3 from './PageTransition/ThirdPage';
1111
import Page from './PageTransition';
12+
import ContainerAnimations from './ContainerAnimations';
1213

1314
const RenderPage = Component => (
1415
<CSSTransition timeout={3000} classNames="fade" in={true}>
@@ -28,6 +29,7 @@ class App extends Component {
2829
<Link to="/page1">Page 1</Link>
2930
<Link to="/page2">Page 2</Link>
3031
<Link to="/page3">Page 3</Link>
32+
<Link to="/container">Containers</Link>
3133
</div>
3234
<Switch>
3335
<AnimatedRoutes>
@@ -41,6 +43,7 @@ class App extends Component {
4143
<Route path="/page2" component={() => RenderPage(Page2)} />
4244
<Route path="/page3" component={() => RenderPage(Page3)} />
4345
</Page>
46+
<Route path="/container" component={ContainerAnimations} />
4447
</div>
4548
);
4649
}

‎src/ContainerAnimations/index.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, { Component } from 'react';
2+
3+
class Container extends Component {
4+
state = { show: true, scale: false };
5+
onHide = () => this.setState({ show: false });
6+
onScale = () => this.setState({ scale: !this.state.scale });
7+
render() {
8+
return (
9+
<div>
10+
<div
11+
className={
12+
'page animated-page-wrapper ' + (!this.state.show ? 'fade-out' : '')
13+
}
14+
>
15+
<h1>Components</h1>
16+
<div className="ui message">
17+
<div className="header">Changes in Service</div>
18+
<p className={this.state.scale ? 'scale-out' : ''}>
19+
We just updated our privacy policy here to better service our
20+
customers. We recommend reviewing the changes.
21+
</p>
22+
<button className="ui primary button" onClick={this.onHide}>
23+
Hide
24+
</button>
25+
<button className="ui button" onClick={this.onScale}>
26+
Scale
27+
</button>
28+
</div>
29+
<div className="ui message slide-left">
30+
<div className="header">Slide Left</div>
31+
<p>
32+
We just updated our privacy policy here to better service our
33+
customers. We recommend reviewing the changes.
34+
</p>
35+
</div>
36+
<div className="ui message slide-right">
37+
<div className="header">Slide Right</div>
38+
<p>
39+
We just updated our privacy policy here to better service our
40+
customers. We recommend reviewing the changes.
41+
</p>
42+
</div>
43+
<div className="ui message slide-top">
44+
<div className="header">Slid Top</div>
45+
<p>
46+
We just updated our privacy policy here to better service our
47+
customers. We recommend reviewing the changes.
48+
</p>
49+
</div>
50+
<div className="ui message slide-bottom">
51+
<div className="header">Slid bottom</div>
52+
<p>
53+
We just updated our privacy policy here to better service our
54+
customers. We recommend reviewing the changes.
55+
</p>
56+
</div>
57+
<div className="ui message flip">
58+
<div className="header">Slid bottom</div>
59+
<p>
60+
We just updated our privacy policy here to better service our
61+
customers. We recommend reviewing the changes.
62+
</p>
63+
</div>
64+
</div>
65+
</div>
66+
);
67+
}
68+
}
69+
70+
export default Container;

‎src/PageTransition/FirstPage.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
33
class FirstPage extends Component {
44
render() {
55
return (
6-
<div className="page animated-page-wrapper">
6+
<div className="page animated-page-wrapper ">
77
<h1>Page 1</h1>
88
<p>Hello from a page 1</p>
99
</div>

0 commit comments

Comments
 (0)