Animation not working on component in ReactJS.

user_9006680 0
Viewed 5516

Good day. I have been attempting to create the animation demonstrated here in ReactJS. I have using that codepen as a loose reference, yet the animation doesn't work when I press the login button on my own project implementing this effect on the login page.

What have I done wrong?

Thanks in advance, Duke J. Morgan.

The specific aspects of my project that, as far am I aware, are primary components in the login page that, in this problem, might be the cause of the problem I mentioned above:

import React, { Component } from 'react';

class LoginComponent extends Component {
constructor(props) {
    super(props)
    this.state = {
        incorrect: false
    }

}

onLoginButtonClick() {
    let passwordInput = document.getElementById("passwordInput");

    if (passwordInput.innerHTML !== "test") {
        // passwordInput.classList.add("incorrect-login");
        let copy = this.state;
        copy.incorrect = true;
        console.log(`Incorrect boolean: ${copy.incorrect}`);
        this.setState(copy);
        return;
    }

    this.props.setPage();
}

render() { 
    return (<div className="box" id="loginBox">
        <h2 className="title">Username</h2>
        <input type="text" placeholder="Username" className="input"/>
        <h2 className="title">Password</h2>
        <input id="passwordInput" placeholder="Password" className={`input ${this.state.incorrect ? 'incorrect-login' : ''}`} type="password"/>
        {/* <a href="#">Forgot Password?</a> */}
        <button className="button" id="login" onClick={() => {this.onLoginButtonClick()}}>Login</button>
    </div>);
}
}
export default LoginComponent;


//The CSS of the login box. incorrect-login is the class added to the password input element when the login button is clicked but the incorrect password, or no password, has been entered. 
#loginBox {
.title:nth-child(1) {
    margin-bottom: 10px;
}

.title:nth-child(3) {
    margin-bottom: 10px;
    margin-top: 10px;
}

.incorrect-login {
    margin: 4px auto;
    width: 70%;
    height: 15%;
    display: block;
    padding: 5px;
    padding-left: 10px;
    border: 2px solid red;
    animation: move 10s;
}
}

@keyframes move {
0%, 100% { left: 0px;}
20% , 60%{left: 15px;}
40% , 80%{left: -15px;}
}
reactjs frontend css
1 Answers

The problem is in the css. I think you should make separated classes for the login and incorrect-login.

.login {
    margin: 4px auto;
    width: 70%;
    height: 15%;
    display: block;
    padding: 5px;
    padding-left: 10px;
    position: absolute;
}

.incorrect-login {
    border: 2px solid red;
    animation: move 10s;
}

If you want to use property "left" in animation you have also add property position: absolute; to the component's class.

And code for the password input class name should be:

className={`input ${this.state.incorrect ? 'login incorrect-login' : 'login'}`}

Also you should not use document.getElementById in React applications directly. If you really need to get reference of the dom element created by React, you should use ref prop instead.

user_95768820
Related