Responsive-Tabs icon indicating copy to clipboard operation
Responsive-Tabs copied to clipboard

Animation depending on state

Open coxrichuk opened this issue 8 years ago • 5 comments

Is it possible to have different animations depending on the state (tabs / accordion).

It seems to make sense to have fade on tabs view and slide on accordion view

I can put through a PR for this if required?

coxrichuk avatar May 10 '16 10:05 coxrichuk

Was also wanting this, makes sense to have slide animation on accordion and fade or no animation on tabs.

neilgee avatar Sep 10 '16 01:09 neilgee

I have no plans on adding this myself, but a PR is always welcome

jellekralt avatar Mar 27 '17 12:03 jellekralt

+1 to this, It make sense to activate slide animation for accordion, but not for tabs (strange). It would be great to be able to define different animation depending on state.

ghost avatar Jun 15 '17 13:06 ghost

This mostly works for me. Animation works if you load no mobile but not if you load and desktop and resize down. Not sure why. LINE 438

    if(_this.getState() === 'accordion') {
      switch(method) {
          case 'slide':
              effect = (state === 'open') ? 'slideDown' : 'slideUp';
              break;
          case 'fade':
              effect = (state === 'open') ? 'fadeIn' : 'fadeOut';
              break;
          default:
              effect = (state === 'open') ? 'show' : 'hide';
              // When default is used, set the duration to 0
              _this.options.duration = 0;
              break;
      }
    } else {
      effect = (state === 'open') ? 'show' : 'hide';
      // When default is used, set the duration to 0
      _this.options.duration = 0;
    }

jtphelan avatar May 11 '18 21:05 jtphelan

Good job!

Then I implemented when click the tabs scroll to Tabs Top with Callbacks.

$('#detail-tabs').responsiveTabs({
	startCollapsed: 'accordion',
	scrollToAccordion: true,
	animation: 'slide',
	duration: 300,
	click: function(e, tab) {
		$('html, body').animate({
			scrollTop: $(this).offset().top
		}, 300)
	},
});

bigfocus avatar Jul 26 '22 08:07 bigfocus