Fade out a button and if the user does something fade it in?

Ionic Framework ionic-v3
1

Hello,
i have a Button in white color and i want that after 5 seconds if the user does nothing the button gets fade out to transparent. And if the user scroll or click or touch the screen the button should instandly come back to white. Is something like that possibile in ionic?

EDIT:
Well the best way to fade in and fade out an element is to use jquary. (You can do JS aswell but then you have to programm it by yourselfe)

First make sure you have Jquery installed:

npm install jquery --save
npm install -g typings
typings install dt~jquery --global --save

Then import jquery in you page:

import * as $ from 'jquery';

and now we can fade in and fade out an element with this two lines:

$("#element").fadeOut();
$("#element").fadeIn();

SO the Problem now is how can i trigger a function if the user does an action or not?
I want to use this: $("#element").fadeOut(); 5 Seconds after the user did nothing on the screen. And then if he touches the screen the first time again do this: $("#element").fadeIn();

2

Personally I would use CSS transitions and add/remove a class from the element :slight_smile:

So I guess you could do

<button [class.faded]="lastUserAction + 5000 < Date.now()"></button>

Though I don’t know how to access Date in the HTML, so I guess you could make a function that returns Date.now().

3

If an action can be simplified as a touch-event, you could listen to all touch events and start a $timeout which will fade out the button after 5 seconds if a $timeout does not exist already. If a $timeout does exist, cancel the $timeout and start a new one.

https://docs.angularjs.org/api/ng/service/$timeout

4

@mich356c @macondele

yeah thank you guys. i use now a Timer that starts when the page opens and fade out the button.

But the problem here is how can i fade it in again after the user did an action again?
Is there any way to trigger a touch-event?

5

If a touch-event equals “user did an action”, then you could just run a check on every touch-event which checks if the button is faded out and if it is, fade it in again.

6

If you use the class approach, you would only need to update this.lastUserAction every time the user e.g. taps, writes, whatever else. The button will fade appropriately.

updateLastUserAction() {
    this.lastUserAction = Date.now();
}
7

yeah that would be the best. but how to trigger that:

every time the user e.g. taps, writes, whatever else

8

I think maybe binding press, tap, swipe on the content should do it. Not too sure if it triggers for child elements tho. I can’t seem to find the documentation for them … I think it’s just hammerJS so try some of these

https://github.com/hammerjs/hammer.js/wiki/Getting-Started#gesture-events (touch seems promising)

9

something like this i think could work:

var scrollcontent = document.getElementById('scrollcontent');
var hammertime = Hammer(element).on("touch", function(event) {
    alert('user touched screen!');
});
10

What I meant is that I believe all the gestures listed there are already available for bindings on elements

<ion-content (swipe)="trigger()" (press)="trigger()" (hold)="trigger()" (touch)="trigger()"></ion-content>
11

lemme try the touch one.

12

Found this http://ionicframework.com/docs/v2/components/#gestures try putting some or all on the ion-content see if it works

Please note these should go on the ION-CONTENT element, not the BUTTON.