小编gro*_*kle的帖子

将html转换为javascript

有没有人知道是否有可以将html转换为javascript的工具.

例如:

<div>
</div>
Run Code Online (Sandbox Code Playgroud)

将转换为

aDiv = document.createElement('div');
document.appendChild(aDiv);
Run Code Online (Sandbox Code Playgroud)

等等

我正在为UI组件做一些html模板,并使用MooShell进行原型设计.能够自动生成将构建组件的html的javascript会很棒.

谢谢

html javascript converter

9
推荐指数
1
解决办法
862
查看次数

CSS3动画的Javascript降级解决方案

我一直在为iPad应用程序创建一些小型胖客户端JavaScript应用程序,它们在UIWebview中加载相关应用程序.我现在正在使用跨浏览器,需要使用JavaScript为CSS动画和过渡添加一些后备.

我的webkit特定实现使用CSS类用于所有动画/转换,其中开始和结束状态在设计时已知,使用javascript中的add/remove类并使用相关的webkitTransitionEnd/webkitAnimationEnd事件.

对于"动态"过渡,我有一个简单的"动画"功能,它只是将样式属性应用于相关元素.

我想保留内部API,通过简单的添加/删除类等,尽可能地将转换应用到当前实现.我通常有一个应用程序的CSS和js文件(都缩小了).

所以有几个问题/点我会感激任何输入:

  1. IE7/8问题 - IE9.js

  2. 动态添加供应商特定的前缀 - 到目前为止找到'jquery.css3finalize'.

  3. 转换到类:'jquery.animateToClass' - 似乎每次应用类时都会搜索样式表 - 是否应该在进一步的查找中缓存相关的类?这是缓慢的/资源饥饿的吗?

  4. 对于'@keyframe'动画:我想要一个javascript对象'表示'每个CSS3动画的关键帧.因此,将类传递给'doAnimationWithClass'函数将使用普通的css3动画(如果在浏览器中可用),但如果不是,它会将'对象版本'传递给使用css3过渡(如果可用)链接每个关键帧过渡的函数或jQuery.animate(或等效的),最终得出相同的结果.

例如:

CSS:

@-webkit-keyframes an-animation {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.an-animation {
  -webkit-animation-name: an-animation;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 2;
}
Run Code Online (Sandbox Code Playgroud)

JS:

var animations = {
    an-animation: {
      keyframes: [
      { 
        duration: '',
        timing: 'linear',
        props: {
          opacity: 0
        }
      },
      { 
        duration: '0.5s',
        timing: 'linear',
        props: {
          opacity: 1
        }
      }, …
Run Code Online (Sandbox Code Playgroud)

javascript animation cross-browser graceful-degradation css3

5
推荐指数
1
解决办法
1765
查看次数