Message Box – Jack In the Box
This animation I borrowed from the quite a nice web-site Animate.css.
You need to add this piece of CSS onto your form to be able to achieve that.
Subform – SlideInRight
In Sharepoint online the forms for creating/editing new items appear by default on the left. I decided to copy the behavior in K2 and also to add some animations. Here is what I get:
First of all, you need to configure your SubView or SubForm width and height values. Because the values, used in CSS styles depend on the values of the Subform Width. For the demo I used the following:
- height – 100%
- width – 30%
Now depending on the width of the Subform, you need to calculate how far you need to move your subform right, so that it is not visible in the beginning and then appears and stays on the right. Basically, you need 2 values: initial state of the animation and the final state. I created the following formula so that it is easy to calculate:
-- Final State - the subForm is visible on the right.
((100% - subFormWidth) / 2) / subFormWidht * 100
-- Initial State - the subForm is moved beyond the right border
FinalState + 100%
So since the width of the subview is 30%, my states have the following values:
- Initial State – 217%
- Final State – 117%
Now you can see those values in my code:
And here you can zoom in your subform.
Just add the following piece of code onto your Form.
You can try something else, if you want to. For example, you can slide in your message boxes and subforms/subviews from the top, or using some bizarre flying out features. The most important is to have fun and bring in some fun into your applications.
I have create a separate repo on GitHub, where I will try to collect all such nice K2 features. You can find it under K2Devs.