css transition changing class with pseudoelement

I am working on a React app.

I am using two css classes with after pseudo-element to add a left- and a right- triangle

   .triangle-right::after {
        content: "\25B6";
        font-size: 10px;
    }
    .triangle-down::after {
        content: "\25BC";
        font-size: 10px;
    }

I transition from the two triangles changing the class of the element.

<span className={(this.state.isOpen ? 'triangle-down' : 'triangle-right')}></span>

Is it possible to use css transition to animate the change ?

CodePen

1 answer

  • answered 2018-03-13 21:33 Ted

    Yes, but not like you've done it. Try this:

    .triangle-right:after {
        content: "\25B6";
        display: inline-block;
        font-size: 10px;
        transition: transform 200ms;
    }
    .triangle-right.is-open:after {
        transform: rotate(90deg);
    }
    

    and this html

    <span className={`triangle-right${this.state.isOpen ? ' is-open' : ''}`} />
    

    What this does is rotate the original icon, instead of changing it to a new one (which isn't possible to animate with a font).

    See it working in this demo.