vue-position-after-transform

Because Css is positioning elements before transform, some special positioning is difficult or even impossible.

Vue-position-after-transform does js positioning after css-transform - with the help of getBoundingClientRect.

Demo

Install

npm install --save-dev vue-position-after-transform

or include build/bundle.js.

Usage

# link the components up
components:
  "pat": require("vue-position-after-transform").parent
  "patc": require("vue-position-after-transform").child
  # or when using bundle.js:
  "pat": window.vueComps.pat
  "patc": window.vueComps.patc

# in the template
<pat>
  <patc style="transform:rotate(45deg)">some rotated stuff</patc>
</pat>

For examples see dev/.

Props

Name	type	default	description
update	Boolean	false	will update on element resize
valign	String	"top"	available: "top", "center", "bottom"
halign	String	"left"	available: "left", "center","justify", "right"
childwidth	String	"mean"	available: "mean", "actual" or an absolute number; width which is taken to position the children.
origin	String	"center"	available: "left", "center", "right"; used in halign: "center" and "justify" to position child relative to given childwidth
rotatedParent	Boolean	false	set `true` when the component is rotated somehow. This will append the content to `body` during calculation, consequently all nested styling will be ignored

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.