CODEWITHSUNDEEP
cssreactjsfrontend
Duke Jake Morgan
Duke Jake Morgan

Reputation: 245

Animation not working on component in ReactJS.

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;}
}

Upvotes: 3

Views: 8427

Answers (1)

v1r00z
v1r00z

Reputation: 103

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.

Upvotes: 1

Related Questions