[TIMOB-20255] Label will not animate if text property is empty string or not defined

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Invalid
Resolution Date	2016-02-08T19:29:05.000+0000
Affected Version/s	Release 5.1.2
Fix Version/s	n/a
Components	iOS
Labels	n/a
Reporter	CREATIVE KAIZEN
Assignee	Shak Hossain
Created	2016-01-18T10:30:02.000+0000
Updated	2017-06-07T21:31:06.000+0000

Description

*Example code*:

var label = Ti.UI.createLabel({
   opacity: 1,
   color: '#000'
)};

var animation = Ti.UI.createAnimation({
   duration: 500,
   opacity: 0
)};

label.animate(animation);

animation.addEventListener('complete', someFunction);

*Expected behaviour:* Animation should work (for example text may be set dynamically and user is not sure if there will be any text) and opacity value should be changed. 'complete' event should be fired. *Actual behaviour*: If text property is not set or set to '' (empty string), than animation won't work and complete listener won't be fired. *Actual workaround*: Before calling animation user have to check if string is empty/not set and then take appropriate behavior.

if(label.text) {
   label.animate(animation);
   animation.addEventListener('complete', someFunction);
} else {
   someFunction();
}

Comments

Angel Petkov 2016-02-08

[~CREATIVE KAIZEN] Hello this is not a bug, the reason this doesn't work is because if a label height/width is not specified it will be automatically sized depending on the text inside the label. The fact you are neither specifying the text or size properties the label will just be empty with a size of 0. Which is why the animation cannot be seen. What use case are you using for the need to have an empty label with no size specified ? If you need an empty label with animation , all you have to do is specify the size and it will work. For example :

   var win = Ti.UI.createWindow({
       backgroundColor : 'white'
   });
   var label = Ti.UI.createLabel({
       //text : 'Hello World', //comment out this property to test the animation 
       top             : 250,
       opacity         : 1,
       color           : '#000',
       backgroundColor : "green",
       height          :50,
       width           :50
   });
   var animation = Titanium.UI.createAnimation();
   animation.backgroundColor = 'black';
   animation.duration = 1000;
   var animationHandler = function() {
     animation.removeEventListener('complete',animationHandler);
     animation.backgroundColor = 'orange';
     label.animate(animation);
   };
   animation.addEventListener('complete',animationHandler);
   label.animate(animation);
   win.add(label);
   win.open();

Pedro Enrique 2016-02-08

Resolving as invalid. width, height, and text properties are missing.
CREATIVE KAIZEN 2016-02-08

Hello, @Angel: If you have a label, which content is downloaded dynamically (via API), than u don't know the value of height and u cannot set it on creation. And u may want to animate some text on load and then change the value of text and depending if first text was empty string or not then u have different color at the end. @Pedro: Yes. This is what I wrote. Animation will not change the colors if those values are not set on creation. If we don't set height/width (but text) it will work, if we don't set text (but height/width) it will work, so if u don't set any of those it is quite bizarre that output will be different. So I consider it as a bug.

Angel Petkov 2016-02-08

[~CREATIVE KAIZEN] If thats the case set the label size to 'Ti.UI.SIZE' and it will be sized to whatever is needed depending on the size of the downloaded content. So soon as the label is populated with the downloaded content it will appear and it will be animated. For example :

   var win = Ti.UI.createWindow({
       backgroundColor : 'white'
   });
   var label = Ti.UI.createLabel({
       top : 250,
       opacity : 1,
       color : '#000',
       backgroundColor : "green",
   });
   
   setTimeout(function(){
   
       label.text = "hello world";
       label.width = Ti.UI.SIZE;
       label.height = Ti.UI.SIZE;
       
       var animation = Titanium.UI.createAnimation();
       animation.backgroundColor = 'black';
       animation.duration = 1000;
       
       var animationHandler = function() {
         animation.removeEventListener('complete',animationHandler);
         animation.backgroundColor = 'orange';
         label.animate(animation);
       };
       animation.addEventListener('complete',animationHandler);
       label.animate(animation);
   
   }, 3000);
   
   win.add(label);
   win.open();

Lee Morris 2017-06-07

Closing ticket, please open a new ticket if any more problems persist.

JSON Source