Basic¶

Description: The transitions Object groups transition instances together in which each child Object is treated as a separate transition instance.

ctr('.test', {
  width: 200px
  transitions: {
    one: {
      opacity: 1
    }
    two: {
      color: blue
      background: red
    }
  }
})

.test:
  width: 200px
  transitions:
    one:
      opacity: 1
    two:
      color: blue
      background: red

.test {
  opacity: 1;
  color: #00f;
  width: 200px;
  background: #f00;
  transition-delay: 0s, 0s, 0s;
  transition-duration: 0.5s, 0.5s, 0.5s;
  transition-property: opacity, color, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  transitions: {
    one: {
      opacity: 1
    }
    two: {
      color: blue
      background: red
    }
  }
})

.test {
  opacity: 1;
  color: #00f;
  width: 200px;
  background: #f00;
  transition-delay: 0s, 0s, 0s;
  transition-duration: 0.5s, 0.5s, 0.5s;
  transition-property: opacity, color, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  transitions:
    one:
      opacity: 1
    two:
      color: blue
      background: red

Notes

• Using the transitions Object is a bit silly for 99% of use cases
• In the transitions Object, you cannot use any ctr reserved keys that are not transition related, such as first-child, animation, etc.

Common Key¶

Description: A common Object can be defined in the transitions Object to specify common values used by all transition instances.

ctr('.test', {
  width: 200px
  transitions: {
    // merged into each transition
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
    }
    one: {
      opacity: 1
    }
    two: {
      option: {
        duration: 1s
      }
      color: blue
      background: red
    }
  }
})

.test:
  width: 200px
  transitions:
    # merged into each transition
    common:
      option:
        duration: 2s
        ease: ease-in
    one:
      opacity: 1
    two:
      option:
        duration: 1s
      color: blue
      background: red

.test {
  opacity: 1;
  color: #00f;
  width: 200px;
  background: #f00;
  transition-delay: 0s, 0s, 0s;
  transition-duration: 2s, 1s, 1s;
  transition-property: opacity, color, background;
  transition-timing-function: ease-in, ease-in, ease-in;
}

ctr('.test', {
  width: 200px
  transitions: {
    // merged into each transition
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
    }
    one: {
      opacity: 1
    }
    two: {
      option: {
        duration: 1s
      }
      color: blue
      background: red
    }
  }
})

.test {
  opacity: 1;
  color: #00f;
  width: 200px;
  background: #f00;
  transition-delay: 0s, 0s, 0s;
  transition-duration: 2s, 1s, 1s;
  transition-property: opacity, color, background;
  transition-timing-function: ease-in, ease-in, ease-in;
}

.test:
  width: 200px
  transitions:
    # merged into each transition
    common:
      option:
        duration: 2s
        ease: ease-in
    one:
      opacity: 1
    two:
      option:
        duration: 1s
      color: blue
      background: red

Notes

• common alias: global
• The common Object is deep merged into each transition instance

Omit¶

Description: A List value for the omit option property in an Object transition instance omits specific common values from being merged into the instance. The omit value is defined by the property path relative to the common Object.

ctr('.test', {
  width: 200px
  transitions: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
    }
    one: {
      opacity: 1
    }
    two: {
      option: {
        // omits ease
        omit: 'option.ease'
      }
      color: blue
      background: red
    }
  }
})

.test:
  width: 200px
  transitions:
    common:
      option:
        duration: 2s
        ease: ease-in
    one:
      opacity: 1
    two:
      option:
        # omits ease
        omit: option.ease
      color: blue
      background: red

.test {
  opacity: 1;
  color: #00f;
  width: 200px;
  background: #f00;
  transition-delay: 0s, 0s, 0s;
  transition-duration: 2s, 2s, 2s;
  transition-property: opacity, color, background;
  transition-timing-function: ease-in, cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  transitions: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
    }
    one: {
      opacity: 1
    }
    two: {
      option: {
        // omits ease
        omit: 'option.ease'
      }
      color: blue
      background: red
    }
  }
})

.test {
  opacity: 1;
  color: #00f;
  width: 200px;
  background: #f00;
  transition-delay: 0s, 0s, 0s;
  transition-duration: 2s, 2s, 2s;
  transition-property: opacity, color, background;
  transition-timing-function: ease-in, cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  transitions:
    common:
      option:
        duration: 2s
        ease: ease-in
    one:
      opacity: 1
    two:
      option:
        # omits ease
        omit: option.ease
      color: blue
      background: red

Notes

• Only omit values are excluded
• Conversely, the pick option property is the inverse, in that only pick values are merged
• Lookup is performed through the lodash _.get Function via dot notation: <path>.<to>.<omit>.<property>

Pick¶

Description: A List value for the pick option property in an Object transition instance picks specific common values to be merged into the instance. The pick value is defined by the property path relative to the common Object.

ctr('.test', {
  width: 200px
  transitions: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
    }
    one: {
      opacity: 1
    }
    two: {
      option: {
        // only picks duration
        pick: 'option.duration'
      }
      color: blue
      background: red
    }
  }
})

.test:
  width: 200px
  transitions:
    common:
      option:
        duration: 2s
        ease: ease-in
    one:
      opacity: 1
    two:
      option:
        # only picks duration
        pick: option.duration
      color: blue
      background: red

.test {
  opacity: 1;
  color: #00f;
  width: 200px;
  background: #f00;
  transition-delay: 0s, 0s, 0s;
  transition-duration: 2s, 2s, 2s;
  transition-property: opacity, color, background;
  transition-timing-function: ease-in, cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  transitions: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
    }
    one: {
      opacity: 1
    }
    two: {
      option: {
        // only picks duration
        pick: 'option.duration'
      }
      color: blue
      background: red
    }
  }
})

.test {
  opacity: 1;
  color: #00f;
  width: 200px;
  background: #f00;
  transition-delay: 0s, 0s, 0s;
  transition-duration: 2s, 2s, 2s;
  transition-property: opacity, color, background;
  transition-timing-function: ease-in, cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  transitions:
    common:
      option:
        duration: 2s
        ease: ease-in
    one:
      opacity: 1
    two:
      option:
        # only picks duration
        pick: option.duration
      color: blue
      background: red

Notes

• Only pick values are merged and all other values are excluded
• Conversely, the omit option property is the inverse, in that only omit values are exculed from the merge
• Lookup is performed through the lodash _.get Function via dot notation: <path>.<to>.<pick>.<property>