Usage¶

Description: Predefined state transitions can be declared in the state Object using the preset key with a String value that corresponds to the preset list below.

ctr('.test', {
  width: 200px
  height: 200px
  background: teal
  hover: {
    preset: 'sink'
  }
})

.test:
  width: 200px
  height: 200px
  background: teal
  hover:
    preset: sink

.test {
  width: 200px;
  height: 200px;
  background: #008080;
}
.test:hover {
  transition-delay: 0s;
  display: inline-block;
  vertical-align: middle;
  transition-duration: 0.3s;
  transform: translateY(8px);
  backface-visibility: hidden;
  transition-property: transform;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  transition-timing-function: ease-out;
}
.test:not(:hover) {
  transition-delay: 0s;
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  transition-duration: 0.3s;
  backface-visibility: hidden;
  transition-property: transform;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  transition-timing-function: ease-out;
}

ctr('.test', {
  width: 200px
  height: 200px
  background: teal
  hover: {
    preset: 'sink'
  }
})

.test {
  width: 200px;
  height: 200px;
  background: #008080;
}
.test:hover {
  transition-delay: 0s;
  display: inline-block;
  vertical-align: middle;
  transition-duration: 0.3s;
  transform: translateY(8px);
  backface-visibility: hidden;
  transition-property: transform;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  transition-timing-function: ease-out;
}
.test:not(:hover) {
  transition-delay: 0s;
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  transition-duration: 0.3s;
  backface-visibility: hidden;
  transition-property: transform;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  transition-timing-function: ease-out;
}

.test:
  width: 200px
  height: 200px
  background: teal
  hover:
    preset: sink

Notes

• Where is the rest of the hover.css library?
  • Answer one, I ran out of steam due to the mind-numbing tedium of the process
  • Answer two, hardcoding these types of libraries into the core of ctr is a shitty design implementation and with the rewrite there will be a much more flexible and extensible solution
• Attribution: hover.css — creator Ian Lunn
• NOTICE: When I integrated hover.css pre 2.2.0 it was license under the MIT license, although, that has changed and now it’s licensed under a UpLabs commercial license. As such hover.css will not be included in future releases, however, it will be replaced with a better alternative Open Source solution.
  • Looking for an Open Source project idea to create, wink wink

Preset List

bob	bounceIn	bounceOut	buzz
buzzOut	float	grow	growRotate
hang	pop	pulse	pulseGrow
pulseShrink	push	rotate	shrink
sink	skew	skewBackward	skewFoward
wobbleBottom	wobbleHorizontal	wobbleSkew	wobbleToBottomRight
wobbleToTopRight	wobbleTop	wobbleVertical

Modify¶

Description: Any preset option or value can be altered or extended, although, to do so, the preset must be defined in the common Object.

ctr('.test', {
  width: 200px
  height: 200px
  background: teal
  hover: {
    common: {
      option: {
        duration: 1s
      }
      preset: 'sink'
    }
    on: {
      opacity: 1
      transform: translateY(15px)
    }
    non: {
      opacity: 0.5
    }
  }
})

.test:
  width: 200px
  height: 200px
  background: teal
  hover:
    common:
      option:
        duration: 1s
      preset: sink
    on:
      opacity: 1
      transform: translateY(15px)
    non:
      opacity: 0.5

.test {
  width: 200px;
  height: 200px;
  background: #008080;
}
.test:hover {
  opacity: 1;
  display: inline-block;
  vertical-align: middle;
  transition-delay: 0s, 0s;
  backface-visibility: hidden;
  transform: translateY(15px);
  transition-duration: 0.3s, 1s;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  transition-property: transform, opacity;
  transition-timing-function: ease-out, cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  opacity: 0.5;
  display: inline-block;
  vertical-align: middle;
  transition-delay: 0s, 0s;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition-duration: 0.3s, 1s;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  transition-property: transform, opacity;
  transition-timing-function: ease-out, cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  height: 200px
  background: teal
  hover: {
    common: {
      option: {
        duration: 1s
      }
      preset: 'sink'
    }
    on: {
      opacity: 1
      transform: translateY(15px)
    }
    non: {
      opacity: 0.5
    }
  }
})

.test {
  width: 200px;
  height: 200px;
  background: #008080;
}
.test:hover {
  opacity: 1;
  display: inline-block;
  vertical-align: middle;
  transition-delay: 0s, 0s;
  backface-visibility: hidden;
  transform: translateY(15px);
  transition-duration: 0.3s, 1s;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  transition-property: transform, opacity;
  transition-timing-function: ease-out, cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  opacity: 0.5;
  display: inline-block;
  vertical-align: middle;
  transition-delay: 0s, 0s;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition-duration: 0.3s, 1s;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  transition-property: transform, opacity;
  transition-timing-function: ease-out, cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  height: 200px
  background: teal
  hover:
    common:
      option:
        duration: 1s
      preset: sink
    on:
      opacity: 1
      transform: translateY(15px)
    non:
      opacity: 0.5

Notes

• Alterations are deep merged via _.defaultsDeep