crayonix/giovani.lol
Archived
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed issue with animation not working on progress bar

Browse Source
This commit is contained in:
Giovani
2019-04-12 08:59:17 -04:00
parent 8a4f32d96f
commit d143e84a18
2 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/shared/skills/skills.css
View File

@@ -3,6 +3,9 @@
}
.progress-bar-ani {
-webkit-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
/* ADD REST OF TRANSITIONS FOR BROWSER */
-webkit-transition: width 1.3s ease-in-out;
-moz-transition: width 1.3s ease-in-out;
-o-transition: width 1.3s ease-in-out;
transition: width 1.3s ease-in-out;
}

36
src/components/shared/skills/skills.js
View File

@@ -1,6 +1,5 @@
import React, {Component} from 'react';
import './skills.css';
import { ReactComponent } from '*.svg';
class Skills extends Component {
constructor(props) {
@@ -8,18 +7,32 @@ class Skills extends Component {
this.state = {
isProgressBarOneInView: false
};
this.progressBarRefs = [
React.createRef(), // ONE
React.createRef(), // TWO
React.createRef(), // THREE
React.createRef() // FOUR
];
}
progressBarOneRef = React.createRef();
progressBarRefs = [];
isElementInView = (offset, elementRef) => {
isElementInView = (elementRef, offset = 0) => {
if (!elementRef) return false;
const top = elementRef.getBoundingClientRect().top;
return (top + offset) >= 0 && (top - offset) <= window.innerHeight;
}
checkProgressBarsInView = () {
checkProgressBarsInView = () => {
for (var i = 0; i < this.progressBarRefs.length; i++) {
let progressBarRef = this.progressBarRefs[i];
if (this.isElementInView(progressBarRef)) {
this.setState({
isProgressBarOneInView: true /* In Progress */
});
}
}
}
render() {
@@ -32,8 +45,8 @@ class Skills extends Component {
<h2><strong>Skills and Abilities</strong></h2>
<div className="mt-5 mb-4">
<h4 className="text-left">C#/.NET</h4>
<div className="progress progress-bar-height" id="progress-bar-one">
<div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarOneRef = el}
<div className="progress progress-bar-height">
<div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[0] = el}
role="progressbar" style={{width: isProgressBarOneInView ? 88+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
@@ -41,19 +54,22 @@ class Skills extends Component {
<div className="mt-5 mb-4">
<h4 className="text-left">Javascript</h4>
<div className="progress progress-bar-height">
<div className="progress-bar progress-bar-ani" role="progressbar" style={{width: 75+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
<div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[1] = el}
role="progressbar" style={{width: 75+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div className="mt-5 mb-4">
<h4 className="text-left">Software Design</h4>
<div className="progress progress-bar-height">
<div className="progress-bar" role="progressbar" style={{width: 70+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
<div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[2] = el}
role="progressbar" style={{width: 70+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div className="mt-5 mb-4">
<h4 className="text-left">MSSQL</h4>
<div className="progress progress-bar-height">
<div className="progress-bar" role="progressbar" style={{width: 62+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
<div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[3] = el}
role="progressbar" style={{width: 62+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>