[AC-4781] Animation height 0 doesnt work

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Resolved
Resolution	Invalid
Resolution Date	2017-02-09T09:39:44.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Alloy, Titanium SDK & CLI
Labels	animation, height
Reporter	Creative
Assignee	Shak Hossain
Created	2017-02-08T14:45:37.000+0000
Updated	2017-02-22T10:07:27.000+0000

Description

Animating to '0dp' and back to '40dp' will not work (tested only on iOS).

Testcase

Create a new project using appc new -n mytestproj and paste the following snippets: *index.js*


function fadeIn(element) {
    element.animate({
        height: 40
    });
    console.log('FADEIN');
};

function fadeOut(element) {
    element.animate({
        height: 0
    });
    console.log('FADEOUT');
};

setTimeout(function() {
    fadeOut($.my_view_reference);
}, 2000);

setTimeout(function() {
    fadeIn($.my_view_reference);
}, 4000);


$.index.open();

*index.xml*

<Alloy>
	<Window class="container">
		<View id="my_view_reference" height="50dp">
			<Label text="Some text" right="50dp"></Label>
			<Switch width="50dp"></Switch>
		</View>
	</Window>
</Alloy>

Comments

Hans Knöchel 2017-02-08

Non-view elements should be wrapped into views in order to be animated properly. Example (for labels):

   var win = Ti.UI.createWindow({
       backgroundColor: '#fff'
   });
   
   var view = Ti.UI.createView({
       height: 40,
       backgroundColor: "red"
   });
   
   view.add(Ti.UI.createLabel({
       text: 'Trigger'
   }))
   
   view.addEventListener('click', function() {
       view.animate({
           height: 0
       });
   });
   
   win.add(view);
   win.open();

Creative 2017-02-09

ok that wasnt clear to me, but it appears I have done so in my code. Please test the given bug though: animate to '0dp' and animate back to a '40dp' height.

Hans Knöchel 2017-02-09

You use two inline-elements (Switch and Label) and the ticket does not state which element gets animated. But when I'd use $.my_view_reference.fadeOut(); it will disappear:

   var win = Ti.UI.createWindow({
       backgroundColor: '#fff'
   });
    
   var view = Ti.UI.createView({
       height: '50dp',
       backgroundColor: "red"
   });
   
   view.add(Ti.UI.createLabel({
      text: 'Some text',
      right: '50dp'
   }))
   
   view.add(Ti.UI.createSwitch({
      text: 'Trigger',
      width: 50
   }))
    
   view.addEventListener('click', function() {
       view.animate({
           height: '0dp'
       });
   });
    
   win.add(view);
   win.open();

Note that you also mixed dp and non-dp units. Try to completely avoid dp units if possible and manage the dp for Android in the tiapp.xml ( <property name="ti.ui.defaultunit" type="string">dp</property>), which is the default already.

Creative 2017-02-09

yes I do actually use that in a lot of my code, but I can remember having a bug with animations previously in which it didnt animate properly when using "0" (integer) over "'0dp'" (string), so i basically sticked to dp units for animations and integers for everything else
Creative 2017-02-09

also the ticket states *exports.fadeOut($.my_view_reference)* which is the parent view element as can be seen in the xml snippet
Creative 2017-02-09

i've provided a full testcase, please run it for yourself and I hope you can reproduce what I run into
Creative 2017-02-14

Hi, can this be re-opened?
Hans Knöchel 2017-02-16

Sorry, we need a single-environment test-case like the one I provided to track it down. Can you provide that?
Creative 2017-02-16

Use the latest Ti SDK (6.0.1.GA) with Alloy (1.9.5) and create a new app with the given testcase. Run it on an iOS simulator (iOS 10.1 (14B72)) and you will see that the second animation will not commence. The testcase works as expected on Android.
Creative 2017-02-22

Hi please reopen this ticket. A valid testcase has already been provided

JSON Source