Basic

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

Edit
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

Common Key

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

Edit
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

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.

Edit
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

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.

Edit
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