Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animation depending on state #107

Open
coxrichuk opened this issue May 10, 2016 · 5 comments
Open

Animation depending on state #107

coxrichuk opened this issue May 10, 2016 · 5 comments

Comments

@coxrichuk
Copy link
Contributor

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?

@neilgee
Copy link

neilgee commented Sep 10, 2016

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

@jellekralt
Copy link
Owner

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

@ghost
Copy link

ghost commented Jun 15, 2017

+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.

@jtphelan
Copy link

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;
    }

@bigfocus
Copy link

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)
	},
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants