小编Wal*_*ari的帖子
卡片翻转动画Internet Explorer 11
我试图让卡片翻转并显示其背面.它适用于所有其他浏览器,但不适用于Internet Explorer 11.
我已经尝试添加-ms-前言,但这没有帮助.问题似乎是IE不支持css属性transform-style: preserve-3d.
这是一个jsfiddle:https://jsfiddle.net/gbkq94hr/
HTML
<body>
<article>
<div id="card0" class="card">
<figure class="front">
</figure>
<figure class="back">
</figure>
</div>
</article>
</body>
JS
$(document).ready(function () {
var flipped = false;
var card = $("#card0");
card.click(function() { flipFunction();});
function flipFunction() {
if (flipped) {
flipped = false;
card.removeClass('flip');
} else {
card.addClass('flip');
flipped = true;
}
};
});
CSS
html {
height: 100%;
}
.flip {
transform: rotateY(180deg);
}
.card {
float:left;
width: 110px;
height: 139px;
cursor: pointer; …推荐指数
解决办法
查看次数
CSS3动画图像质量规模
我缩小了图像,缩小了缩放到图像的原始大小.当图像处于缩小状态时,图像质量非常差.有什么方法可以改善吗？
(这是一个jsfiddle:https://jsfiddle.net/w9o2chmn/7/ )
$(document).ready(function() {
var zoomed = false;
var card = $("#card0");
card.click(function() {
zoomFunction();
});
function zoomFunction() {
if (zoomed) { //card flipped so front is invisible and back is visible.
zoomed = false;
card.removeClass('zoom');
} else { //card not flipped so front is visible and back is invisible
zoomed = true;
card.addClass('zoom');
}
};
});html {height: 100%;}
.zoom {transform: scale(1.0);}
img {
transform: scale(0.5);
transform-style: preserve-3d;
transition: 1s;
}<img id="card0" src="http://valtterilaine.bitbucket.org/png/vihainen.png">推荐指数
解决办法
查看次数
PanResponder内的ScrollView
我正在使用React-Native中的滑动来创建自己的选项卡导航器.它工作正常,但当我在我的一个标签内有一个ScrollView时,它似乎打破了.向左和向右滑动以更改选项卡可以正常工作,并且还可以在滚动视图中向下和向上滚动.当我单击拖动scrollView然后向侧面移动而不释放滑动时它会中断.然后选项卡系统只重置为第一个选项卡.
当滚动滚动视图时,我做了一个黑客攻击,禁用从选项卡内部滑动.这可行,但感觉就像一个糟糕的解决方案,因为标签内容必须知道它在选项卡内.
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { View, Animated, Dimensions, PanResponder } from 'react-native';
import Immutable from 'immutable';
import Tab1 from './Tab1';
import Tab2 from './Tab2';
import ScrollViewTab from './ScrollViewTab';
@connect(
state => ({
tabs: state.tabs
})
)
export default class Tabs extends Component {
static propTypes = {
tabs: PropTypes.instanceOf(Immutable.Map).isRequired,
dispatch: PropTypes.func.isRequired
};
constructor(props) {
super(props);
this.justLoaded = true;
this.state = {
left: new Animated.Value(0),
tabs: [{ // …推荐指数
解决办法
查看次数
什么Express websocket事件存在？
我想知道什么是websocket事件到目前为止我只使用了这个ws.on('message')事件,但是我想使用在建立和关闭连接时触发的事件.我尝试添加ws.on('connection'),但没有被触发.
我的代码:
app.ws('/', function (ws, req) {
ws.on('message', function (textChunk) {
//do stuff
}
});
});
我需要一些客户端编程来执行此操作吗？
我尝试添加它,但是当我从客户端连接时它没有触发.
ws.on('request', function () {
console.log("request");
});
推荐指数
解决办法
查看次数
在顶部显示受CSS3动画影响的div
我有一张div卡,可以在点击时播放动画,其中包括卡片缩放更大.问题是,当卡片扩大时,它的边缘会显示在其他卡片下面.http://puu.sh/oqtEs/5c0d525f8d.png
我能够通过将z-index添加到在点击时应用的类来修复此问题,但它在Safari上不起作用,但在Chrome,FireFox和Edge上工作.
@-webkit-keyframes flipAndZoomAnim
{
0% { -webkit-transform: rotateY(0deg) scale(0.5) translateZ(1px) }
20% { -webkit-transform: rotateY(180deg) scale(0.5) translateZ(1px) }
40% { -webkit-transform: rotateY(180deg) scale(1.0) translateZ(1px) }
80% { -webkit-transform: rotateY(180deg) scale(1.0) translateZ(1px) }
100% { -webkit-transform: rotateY(180deg) scale(0.5 ) translateZ(1px) }
}
@keyframes flipAndZoomAnim
{
0% { transform: rotateY(0deg) scale(0.5) translateZ(1px) }
20% { transform: rotateY(180deg) scale(0.5) translateZ(1px) }
40% { transform: rotateY(180deg) scale(1.0) translateZ(1px) }
80% { transform: rotateY(180deg) scale(1.0) translateZ(1px) }
100% { transform: rotateY(180deg) scale(0.5) translateZ(1px) …推荐指数
解决办法
查看次数
ImageBackground ResizeMode
我最近更新了React-native,它引入了一个警告,其代码如下:
<Image
source={require('../../assets/icons/heart.png')}
style={{
resizeMode: 'contain',
height: 25,
width: 25
}}
>
<Text>foobar</Text>
</Image>
警告:
index.ios.bundle:50435不推荐使用带有子项的<Image>,并且在不久的将来会出错.请重新考虑布局或改为使用<ImageBackground>.
麻烦的是,当我使用ImageBackground组件时,它会给我一个警告,告诉你不能使用ResizeMode样式.
<ImageBackground
source={require('../../assets/icons/heart.png')}
style={{
resizeMode: 'contain',
height: 25,
width: 25
}}
>
<Text>foobar</Text>
</ImageBackground>
警告:
警告:失败的道具类型:提供给"查看"的props.style键'resizeMode'无效.坏对象:{ResizeMode:'包含,高度:25,宽度:25}
你怎么用ImageBackgrounds？似乎没有任何关于它的文档在线.
推荐指数
解决办法
查看次数
卡在中间件中的 console.log(JSON.stringify(req)) 上
当我从客户端连接到 Express 4 node.js websocket 服务器并尝试记录 req 时，整个程序就卡住了。它仍然接受新连接并将其执行到相同的 console.log，但随后陷入困境。我试图弄清楚 req 包含什么，但这种弄清楚的方法似乎不起作用。
app.use(function (req, res, next) {
console.log("middleware");
var session = req.session;
console.log("session: " + JSON.stringify(session));
console.log("req non json: " + req);
console.log("req: " + JSON.stringify(req)); //stuck
return next();
});
推荐指数
解决办法
查看次数
地面阴影看起来不准确和泥泞
我做了一个Threejs项目,在那里我用perlin噪音动态地创建了一个地面.这是代码:
createGround() {
const resolutionX = 100
const resolutionY = 100
const actualResolutionX = resolutionX + 1 // plane adds one vertex
const actualResolutionY = resolutionY + 1
const geometryPlane = new THREE.PlaneGeometry(this.sizeX, this.sizeY, resolutionX, resolutionY)
const noise = perlin.generatePerlinNoise(actualResolutionX, actualResolutionY)
let i = 0
for (let x = 0; x < actualResolutionX; x++) {
for (let y = 0; y < actualResolutionY; y++) {
let h = noise[i]
}
geometryPlane.vertices[i].z = h
i++
}
}
geometryPlane.verticesNeedUpdate = true
geometryPlane.computeFaceNormals() …推荐指数
解决办法
查看次数
React 虚拟化动态高度列表呈现最初堆叠的所有内容
我正在尝试使用react-virtualized来虚拟化一个列表，其中某些行具有不同的高度，并且该列表占据了父级中的所有空间。我正在尝试使用 CellMeasurer、AutoSizer 和 List 组件来完成此任务。
我的包版本如下：
react: "16.8.6"
react-dom: "16.8.6"
react-virtualized: "^9.21.1"
import React, { PureComponent } from 'react';
import 'react-virtualized/styles.css';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
class Table extends PureComponent {
rowRenderer = ({ index, style, key }) => {
return (
<CellMeasurer
cache={this.cache}
columnIndex={0}
key={key}
parent={parent}
rowIndex={index}
>
<div style={style} key={key}>
content
</div>
</CellMeasurer>
);
}
cache = new CellMeasurerCache({
defaultHeight: 24,
fixedWidth: true,
});
renderAutoSizerContent = () => {
return this.RenderList; …推荐指数
解决办法
查看次数
console.ignoredYellowBox如何知道要使用的前缀？
我有一个一般性问题和两个更具体的问题.
- 如何从黄色框警告消息中告诉我如何在React-Native中忽略它？
- 如何忽略此特定警告？
3.我如何忽略这一具体警告？
所有关于忽略特定警告的React-Native文档都说:
"通过使用console.disableYellowBox = true;可以在开发期间禁用YellowBoxes.通过设置应忽略的前缀数组,可以以编程方式忽略特定警告:console.ignoredYellowBox = ['Warning:...'] ;."
所以React-Native提供了这段代码,但我不知道如何指定警告的名称:
console.ignoredYellowBox = ['Warning: ReactNative.createElement'];
javascript reactjs react-native react-native-android react-native-ios
推荐指数
解决办法
查看次数