Alloytouch-Transformjs 让创建 CSS 动画变得更简单

发布于 2020-06-07 10:53:00 字数 2618 浏览 1291 评论 0

安装

你可以运行下面的代码在线安装:

npm install css3transform

API

Transform(domElement, [notPerspective]);

使用

Transform(domElement);//or Transform(domElement, true);

//set "translateX", "translateY", "translateZ", "scaleX", "scaleY",
//"scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
domElement.translateX = 100;
domElement.scaleX = 0.5;
domElement.originX = 0.5;

//get "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ",
//"rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
//console.log(domElement.translateX )

Omi 版本

import Omi from 'omi';
import OmiTransform from '../../omi-transform.js';

OmiTransform.init();

class App extends Omi.Component {
  constructor(data) {
    super(data);
  }

  installed(){
    setInterval(function(){
      this.refs.test.rotateZ += 0.1;
    }.bind(this));
  }

  render() {
    return  `
      <div omi-transform class="test" ref="test" rotateZ="45" translateX="100" >
        omi-transform
      </div>

    `;
  }

  style(){
    return  `
      .test{
        font-size: 20px;
        border: 1px solid red;
        width: 150px;
        font-size
        min-height: 150px;
        text-align: center;
        line-height:150px;
      }
     `;
  }
}

Omi.render(new App(),"#container");

React 版本

//set "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX",
//"rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
render() {
  return (
    <Transform
      translateX={100}
      scaleX={0.5}
      originX={0.5}>
      <div>sth</div>
    </Transform>
  );
}

// you can also use other porps, such as "className" or "style"
render() {
  return (
    <Transform
      translateX={100}
      className="ani"
      style={{width: '100px', background: 'red'}}
      <div>sth</div>
    </Transform>
  );
}

https://www.npmjs.com/package/alloytouch-transformjs

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。