JSFiddle - React, Tailwind, and code Playground

by cancerbero_sgx

HTML

<div class="test1">test 1. This will not animate</div>

<div class="container">
<div class="left flyin"></div>    
</div>

CSS

.flyin {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.left {
    position: fixed;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
}

.test1, .test2 {
    margin: 10px 0;
    cursor: pointer;
}

JavaScript

$(".test1").click(function(){
 test1();   
});

$(".test2").click(function(){
 test2();   
});


function test1(){
    $(".flyin").html("this is test content");
    $(".flyin").removeClass("left");
    $(".container").append("<div class='flyin left'></div>");
};