#1 2017-07-22 11:05:29

tin
Member
Registered: 2016-03-20
Posts: 160

How to use CSS transitions in our AB applications

Hi,David How can I add transition effect (like view animation) when use show or hide method of control?

float_label.ab

Offline

#2 2017-07-22 11:17:38

tin
Member
Registered: 2016-03-20
Posts: 160

Re: How to use CSS transitions in our AB applications

I try to made something like float label in easy way with AB.
https://codepen.io/simoberny/pen/gpddYQ

Offline

#3 2017-07-22 19:09:19

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,633
Website

Re: How to use CSS transitions in our AB applications

Hello tin,

I am not an expert in transition effects, so I am not sure about how to replicate exactly the same effect that you shown in your sample. What I do is to prepare an small sample for App Builder that shown how we can use CSS transition effects in both ways: using the "SetStyle" action and also the appropiate CSS code in order to set the transition effects. Please, take a look at the sample, download it from here: Transitions.zip

CkJElYU.gif

What you can do is to learn about CSS transitions, tin, for example, a good article to start can be this from the W3 Schools: CSS 3 Transitions

Offline

#4 2017-07-23 09:50:11

tin
Member
Registered: 2016-03-20
Posts: 160

Re: How to use CSS transitions in our AB applications

Can I hide label,and then show label with transition effect?

Hide label-> label show and play transition when focus input -> Hide label when lost focus

Offline

#5 2017-07-23 10:03:22

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,633
Website

Re: How to use CSS transitions in our AB applications

Hello tin,

I get it using the "opacity" CSS rule. Apparently we can't use the "display" CSS rule nor hidden the control by the "Hidden" control's option, but use the "opacity" CSS rule to hide the control at the start. Then, when certainly Input control take the focus we can shown (change the opacity) of the Label and hide it (change the opacity again) when the Input loss the focus. Take a look at this sample: MyApp.zip

Offline

#6 2017-07-23 10:26:15

tin
Member
Registered: 2016-03-20
Posts: 160

Re: How to use CSS transitions in our AB applications

Thanks David,I try your demo.I combine code now it can go left.So,how can I set it to slide up instead go to left?
MyApp.zip

Offline

#7 2017-07-23 10:30:56

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,633
Website

Re: How to use CSS transitions in our AB applications

Hello tin,

Take a look at this sample: Transitions.zip

Offline

Board footer

Powered by FluxBB


Copyright © 2017 DecSoft. All rights reserved.