Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !21589

JS module transition: allow to customize transition duration in sass and custom css

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/pvdlg/use-css-transition-duration-in-js into v4-dev Jan 07, 2017
  • Overview 0
  • Commits 43
  • Pipelines 0
  • Changes 49

Created by: pvdlg

The JS modules using transitions (modal, alert, popover, collapse, carousel) currently emulate the transitionEnd event with a duration defined as a static value in each module.

If the transitions duration set in css are different than the statics values in each modules (TRANSITION_DURATION) it creates a visual glitch. The .show class is set after the duration set in each module, disregarding the value set in the css transition property. For example the collapsing module define a static duration of 600ms. If we set in scss $transition-collapse: height 1s ease:

  • The 1s transition will be initiated and the collapsible area start expanding
  • After 600ms the function transitionEndEmulator trigger the transitionEnd event (even though the transition is not complete yet
  • The collapsing class will be removed from the collapsible area and it will suddenly appear expanded fully without the transition having completed

Also if we set in scss $transition-collapse: none, a 600ms transition will still be emulated and the .show class will be set after 600ms while it should be set right away.

This PR add the function transitionEmulator to emulate emulate the transition with the duration set in css and to handle the case of no transition or a 0 duration.

As a result:

  • we can change the transition duration of modal, alert, popover, collapse and carousel components with sass variables
  • we can define specific custom classes with different transition duration, i.e. we can have a collapsible area that expand in 350ms and another one in 700ms
  • we can set the transition to none with sass variable (#18156 can be solve by setting $transition-collapse: none)
  • we don't have a risk to have discrepancy between the js module static duration value and the sass variable that would cause a visual glitch and the static duration in each module are now useless

In addition the function transitionEmulator handle more common code that were previously repeated in each module:

  • determine if there is a transition to apply (previously the presence of a class was checked in each module which was failing to determine a transition set by a custom class)
  • Order properly the transition start and the completion callback depending on the presence of a transition or not (i.e. if transition: setTimeout to call complete callback then start the transition / if no transition: start the class change and then call the complete callback without timeout)
  • As a result it simply the code related to transition in each module and would make it easier to avoid mistakes in future modifications in each modules

Finally the PR updates the unit to test each module behavior with and without transitions

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: github/fork/pvdlg/use-css-transition-duration-in-js