小编vsy*_*ync的帖子

如何在JavaScript中读取单个变换值?

去年Webkit发布的关于3D变换的博客文章解释了可以在-webkit-transform属性中使用的各种变换"函数".例如:

#myDiv {
  -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px);
}
Run Code Online (Sandbox Code Playgroud)

我的问题:你如何在JavaScript中访问个别值?当你读取元素的webkitTransform属性时,你只需要一个包含16个值的matrix3d()函数,就像这样......

matrix3d(0.958684, 0.000000, .....)
Run Code Online (Sandbox Code Playgroud)

有没有办法只读取单个转换事物的值,如rotateY()?或者我必须从matrix3d()字符串中读取它,以及如何?

javascript 3d webkit transform css3

16
推荐指数
3
解决办法
2万
查看次数

Nginx在子文件夹中重写(404)

我在NGINX服务器上有一个站点主机,它曾经index.php在nginx站点配置中正常工作try_files.

但现在我要在其上添加一个博客,URL将在哪里www.foo.com/blog,我可以访问博客并使用index.php?p=.

但是,一旦我使用Nginx Helper的非常永久链接www.foo.com/blog/2013/07/bar,我就会得到404.

server {
  # don't forget to tell on which port this server listens
  listen 80;

  # listen on the www host
  server_name foo.com;

  # and redirect to the non-www host (declared below)
  return 301 $scheme://www.ultra-case.com$request_uri;
}

server {
  # listen 80 default_server deferred; # for Linux
  # listen 80 default_server accept_filter=httpready; # for FreeBSD
  listen 80;

  # The host name …
Run Code Online (Sandbox Code Playgroud)

wordpress nginx http-status-code-404

16
推荐指数
3
解决办法
3万
查看次数

将 JSX.Element 转换为 HTMLElement

我想将此库用于我的 React js 项目https://www.npmjs.com/package/html-to-image

就我而言,我想使用一个包含简单 div 的 var 并将其导出为图像,但有一个问题:我的 var (节点)是 aJSX.Element并且库的“toPng”方法接受 an 参数HTMLElement

在此输入图像描述

在此输入图像描述

我知道库的文档建议使用这样的方法来获取 HTMLElement:var node = document.getElementById('my-node')但就我而言,我无法执行这样的操作,因为我的节点不在文档中。

那么有办法将 JSX.Element 转换为 HTMLElement 吗?提前致谢 ;)

javascript dom reactjs

16
推荐指数
1
解决办法
3万
查看次数

单击javascript顺畅滚动

我正在使用此链接:

<a class="" onclick="location.href='#top'" href="superContent">superContent</a>
Run Code Online (Sandbox Code Playgroud)

它同时做两件事:

  1. 将用户跳转到页面顶部
  2. 执行另一个(不相关的)ajax加载功能

一切都很好,除了我试图弄清楚如何让它更顺畅地滚动到顶部.我已经尝试添加.scroll将它附加到我的jquery scrollTo插件,但没有任何反应,这可能与我正在使用javascript onclick这一事实有关,而href属性完全做了其他事情.

有没有办法将动画平滑滚动附加到onclick ="location.href ='#top'"?

javascript scrolltop

15
推荐指数
2
解决办法
7万
查看次数

Gulp watch - 按顺序执行任务(同步)

我有一系列任务要从观察者运行但我可以按顺序启动它们:

这是gulp任务和观察者.

gulp.task('app_scss', function(){
    return gulp.src(appScssDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(appBuilderDir));
});

gulp.task('app_vendor_css', function(){
    return gulp.src(appProviderCssDir + '/*.css')
        .pipe(minifyCSS({ keepSpecialComments: 0 }))
        .pipe(concat('app_vendor.css'))
        .pipe(gulp.dest(appBuilderDir));

});

gulp.task('app_build_css', function(){
    return gulp.src(appBuilderDir + '/*.css')
        .pipe(concat('style.css'))
        .pipe(gulp.dest(targetCssDir));
});


gulp.task('watch', function () {
    gulp.watch(appScssDir + '/**/*.scss', ['app_scss', 'app_build_css']);
});

gulp.task('default', ['app_build_clean', 'app_scss', 'app_vendor_css', 'app_build_css', 'watch']);
Run Code Online (Sandbox Code Playgroud)

所以当我更新一个scss文件时,它应该编译它们创建一个单独的css文件.然后,构建任务使用供应商文件对文件进行连接.但每次我保存文件时,它总是落后一步.以视频为例:http://screencast.com/t/065gfTrY

我已重命名任务,更改了手表回调中的顺序等.

我犯了一个明显的错误吗?

javascript gulp

15
推荐指数
2
解决办法
2万
查看次数

想知道html5拖放的dragover和dragenter事件的区别

我想知道html5拖放的dragover和dragenter事件的区别.我不清楚这种差异.

html drag-and-drop

15
推荐指数
2
解决办法
7566
查看次数

babel 7.x - Can't resolve 'core-js/modules/es.array.concat'

I upgraded babel 6.x ? 7.x but having issues running Webpack.

It is complaining about missing core-js/modules/*.

My babel.config.js is in the root directory. I converted the previously existing .babelrc to js (.babelrc also produced the same errors). I am guessing it is some collision with all the core, corejs2, runtime stuff.

There are two apps in my src, mine and Styleguidist (in ./node_modules). My app transpiles and works with these same package.json/babel.config, but …

babeljs babel-loader webpack-4 react-styleguidist

15
推荐指数
3
解决办法
2万
查看次数

Firefox设置错误的插入位置contentEditable with:before

操场

这是我的问题的简化版本.
似乎我无法在contentEditable中放置一个定位的伪元素,但在单击以获得焦点在contentEditable元素上时,插入符号位于正确的位置.

在此输入图像描述

div{ padding:10px; border:1px solid #CCC; height:120px; position:relative; }

div::before{ 
  position:absolute; 
  top:10px; 
  left:10px; 
  content:"placeholder"; 
  color:#AAA; 
  transition:.2s;
  opacity:0;
}

div:empty::before{
  opacity:1;
}
Run Code Online (Sandbox Code Playgroud)
<div contentEditable></div>
Run Code Online (Sandbox Code Playgroud)

更新 - 发现报告的BUG:

请投票支持修复此错误 - https://bugzilla.mozilla.org/show_bug.cgi?id=904846

css firefox

14
推荐指数
1
解决办法
4831
查看次数

箭头按钮有垂直的梯度背景

我需要制作这个按钮:

按键

通常当我需要使用渐变和边框制作箭头按钮时,我添加了.button:before具有绝对定位的元素,使用transform: rotate(-45deg) translate(%SOMETHING%);和添加background: linear-gradient(45deg, %COLORS%);.但现在我需要制作按钮,箭头角度不对.我该怎么做?

html css css3 css-transforms

14
推荐指数
2
解决办法
734
查看次数

响应输入onChange滞后

我有一个带有onChange事件处理程序的简单控制输入.

一切都按照handleChange每次按键点火的方式工作,问题是它很慢.

使用输入时存在非常明显的延迟.是否有一些额外的代码我必须正常工作才能正常输入?

我是否必须去除输入?

据我所知,在文档中没有提到这个问题,我不知道是否还有一些额外的事情需要做,或者我是否onChange错误地使用了回调.

handleChange = (event) => {
    this.setState({ itemNumber: event.target.value })
  }


<TextField
      id="Part #"
      label="Part #"
      value={this.state.itemNumber}
      onChange={this.handleChange}
      margin="normal"
    />
Run Code Online (Sandbox Code Playgroud)

组件:

export class Dashboard extends Component {
  state = {
    report: '',
    selectedDate: new Date(),
    itemNumber: '',
  }

  static propTypes = {
    classes: object,
    headerTitle: string,
    userInfo: object,
  }

  static defaultProps = {
    classes: {},
    headerTitle: undefined,
    userInfo: {},
  }

  reportSelected = (event) => …
Run Code Online (Sandbox Code Playgroud)

reactjs

13
推荐指数
3
解决办法
9861
查看次数