So let's go ahead and think about how we can do this. First things first, we are going to want to transition and then translate it. So let's go ahead and do that now.

addRemoveAction.scss

.action {
    &:after,
    &:before {
        content: '';
        display: block;
        background-color: white;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        transition: all .3s ease;
    }

    &:before {
        height: 1em;
        width: 0.2em;
    }

    &:after {
        height: 0.2em;
        width: 1em;
    }
}

Now we know that it's going to transition properly. Now, all we need to do is have a couple classes that we can turn it on.

addRemoveAction.scss

.action-remove {
    &:before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    &:after {
        transform: translate(-50%, -50%) rotate(-135deg);
    }
}

Now we just have to add or remove this class based on its status. So let's go into our action.js and let's say:

Action.js

class Action extends component {

    handleAction = function() {
        this.props.onClick()

        document.getElementbyID('action').classList.add('action-remove')
    }.bind(this);
}

So this is going to be a problem because we need to check what the status is. So let's see if this works initially. Sweet, it looks really good. You will see that it will only work on one of them, and it won't go back.

Really cool animation there. Super simple code too. What we want to do is remove it now. We want to make it removable, but we can't really tell that we have it. So let's go to action.js and do some refactoring:

Action.js

class Action extends Component {

    constructor(props) {
        super(props)

        this.status = false;
    }

    handleAction = function() {
        this.props.onClick()
        if(!this.status) {
            document.getElementById(this.id).classList.add('action-remove');
        } else {
            document.getElementById(this.id).classList.remove('action-remove');
        }
        this.status = !this.status;
    }.bind(this);

    render() {
        this.id = `action ${this.props.id}`
        return (
            <a
                id={this.id}
                onClick={() => this.handleAction()}
                className={`${this.props.className} action`}>

            </a>
        )
    }
}

export default Action;

This is now super simple and clean. Let's go ahead and try it out. You will see that we have our animation, and it looks really good. So there are still a couple things that we need to fix in the this class, and they are pretty simple. First thing is that we need this to animate properly. The next thing is our grid here. It's a little messed up here with our check.

So a couple more videos and we will be done with this component and we will move onto the schedule components in here. So next video is going to be about animating this course description, and not just having it open. We want it to look better than that. So let's go ahead and commit our code: git status, git add ., git commit -m "add remove course actions". See you in the next video.

Resources

Source Code