JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<div class="demo" data-bind="animatingComponent: { name: componentName, params: { value: $data } }"></div>

CSS

.demo {
    border: thin solid black;
    
    padding: 0px;
    margin: 0px;
}

.box {
    width: 200px;
    
}

.content {
    visibility: hidden;
}
.big {
    background: orange;
    margin: 0px;
}
.small {
    background: yellow;
}
.item {
    padding-left: 10px;
}

JavaScript

var getHeight = function(element) {
     return $(element).children().first().outerHeight();
   // return $(element).height();
};

ko.bindingHandlers.animatingComponent = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = valueAccessor();
        var componentName = value.name;
        // create a new observable so we can delay the moment ko's component 
        // binding builds the new component
        var actualComponentName = ko.observable(componentName());
        componentName.subscribe(function (newComponent) {
            var oldHeight = getHeight(element);
            actualComponentName(newComponent);
            
            
            setTimeout(function() {
                $(element).attr("height","");
               // setTimeout(function() {
                    var newHeight = getHeight(element);           
                    $(element).height(oldHeight);
                    $(element).animate({ height: newHeight + "px" }, 400, "swing", function() {
                         var content = $(".content", element);
                       
                        content.css("display", "none");
                        content.css("visibility", "visible");
                        console.log(content[0]);
                        content.fadeIn();
                    });
                    $(".content", element).fadeIn(500);
               // }, 50);
                
            }, 0);
            
            

            
            

            /*$(element).hide(0, function () {
                actualComponentName(newComponent);
                newHeight = $(element).height();
                $(element).height(height).show(0, function () {
                    $(element).animate({
                        height: newHeight
                    });
                })
            });*/
        });

        ko.bindingHandlers.component.init(element, function () {
            return {
           ...