JSFiddle - React, Tailwind, and code Playground

by shengoo

HTML

<div ng-app="myApp">
<div ng-controller="myCtrl">
  <button ng-click="fillinContent()">fillin</button>
  <div ng-if="htmlContent" class="toggle" ng-bind-html="htmlContent"></div>
 </div></div>

CSS

<style>
    .toggle{
        -webkit-transition: linear 1s;
        -moz-transition: linear 1s;
        -ms-transition: linear 1s;
        -o-transition: linear 1s;
        transition: linear 1s;
    }
    .toggle.ng-enter{
        opacity: 0;
    }
    .toggle.ng-enter-active{
        opacity: 1;
    }
    .toggle.ng-leave{
        opacity: 1;
    }
    .toggle.ng-leave-active{
        opacity: 0;
    }
</style>

JavaScript

angular.module("myApp",['ngSanitize','ngAnimate'])
.controller("myCtrl",function($scope){
  $scope.fillinContent = function(){
    $scope.htmlContent = "content content";
  }
});