New to Kendo UI for jQuery? Start a free 30-day trial

TransitionClass

constructor parameters

The transition class name. Passing swap will result in k-fx-swap class set to the common container element.

transitionClass

string

<style>
    .k-fx-custom.k-fx-start .k-fx-next {
        opacity: 0;
        transform: translateY(20px);
    }
    .k-fx-custom.k-fx-end .k-fx-current {
        opacity: 0;
        transform: translateY(-20px);
    }
</style>
<div id="container">
    <div id="element1">Element 1</div>
    <div id="element2" style="display: none">Element 2</div>
</div>
<script>
// Use custom transition class name
kendo.fx("#element1").replace("#element2", "custom").run();
</script>