基本上我正在尝试做的是当一个元素获得一个类时给它一个CSS动画,然后当我在DOM渲染时删除该类而不播放动画时反转该动画.
在这里小提琴:http://jsfiddle.net/bmh5g/
正如你在小提琴中看到的那样,当你悬停"Hover Me"按钮时,#item向下翻转.当您将鼠标悬停在鼠标悬停按钮上时,#item它就会消失.我想#item倒退(理想情况下使用相同的动画,但相反).这可能吗?
HTML:
<div id='trigger'>Hover Me</div>
<div id='item'></div>
Run Code Online (Sandbox Code Playgroud)
CSS:
#item
{
position: relative;
height: 100px;
width: 100px;
background: red;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
#item.flipped
{
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
@keyframes flipper
{
0% { transform: perspective(350px) rotateX(-90deg); }
33% { transform: perspective(350px) rotateX(0deg); }
66% { transform: perspective(350px) rotateX(10deg); …Run Code Online (Sandbox Code Playgroud) 情况:我有一个包含多个子和子子对象的大对象,其属性包含多种数据类型.出于我们的目的,此对象看起来像这样:
var object = {
aProperty: {
aSetting1: 1,
aSetting2: 2,
aSetting3: 3,
aSetting4: 4,
aSetting5: 5
},
bProperty: {
bSetting1: {
bPropertySubSetting : true
},
bSetting2: "bString"
},
cProperty: {
cSetting: "cString"
}
}
Run Code Online (Sandbox Code Playgroud)
我需要循环遍历此对象并构建显示层次结构的键列表,因此列表最终看起来像这样:
aProperty.aSetting1
aProperty.aSetting2
aProperty.aSetting3
aProperty.aSetting4
aProperty.aSetting5
bProperty.bSetting1.bPropertySubSetting
bProperty.bSetting2
cProperty.cSetting
Run Code Online (Sandbox Code Playgroud)
我有这个函数,它循环遍历对象并吐出密钥,但不是分层次的:
function iterate(obj) {
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
if (typeof obj[property] == "object") {
iterate(obj[property]);
}
else {
console.log(property + " " + obj[property]);
}
}
}
}
Run Code Online (Sandbox Code Playgroud)
有人能告诉我怎么做吗?这里有一个jsfiddle让你搞砸:http: …
我试图让Vue.js 2.0类型在Visual Studio中使用TypeScript.以前,我使用过DefinitelyTyped的这些类型,但它们适用于Vue.js 1.0,因此不匹配.但是,他们确实工作得很好,让我使用这种Vue类型.
我已经过渡到使用Vue.js版本附带的打字文件(这里).我已将它们包含在我的~/Scripts/typings/vue文件夹中的项目中,但我的项目并不理解它们.
我收集到这些打字文件可能是通过导入/导出使用的吗?没有其他打字文件我使用这种方式工作,所以我不知道如何正确实现这些打字,以便它们在我的项目全局可用.
我有一个示例解决方案,显示了我尝试过的示例 - 从我的github repo下载.
这是我的Scripts文件夹的结构:
_references.d.ts内容
/// <reference path="typings/vue/index.d.ts" />
Run Code Online (Sandbox Code Playgroud)
vue_test.ts内容
namespace Test
{
export class MyClass
{
public initialize()
{
var component = this.getComponent();
}
private getComponent(): Vue.Component
{
return Vue.component("test", {
template: "<div></div>",
props: ["test"],
methods: {
onClick: () =>
{
}
}
});
}
}
}
Run Code Online (Sandbox Code Playgroud)
我期望的是我可以访问Vue.Component声明的名称空间和其他名称空间typings/vue/index.d.ts,但似乎并非如此.
我确实尝试将导出的类导入到global,如下所示:
import * as _Vue …Run Code Online (Sandbox Code Playgroud) <video width="640" height="360" src="http://jakelauer.com/fireplace.mp4" autoplay loop muted/>
Run Code Online (Sandbox Code Playgroud)
这里小提琴:http://jsfiddle.net/bWqVf/
IE9做得不错.是否有任何建议可以克服这个问题?在像这样的视频中非常明显,应该无缝循环,但有一个恼人的跳过/暂停.
编辑:正如你所看到的,如果我使用javascript来模拟循环,那就有一个可衡量的滞后:http://jsfiddle.net/bWqVf/13/
我知道这是我编写插件以处理多个实例的方式的问题.我很确定至少有一个变量会被插件的每次后续调用覆盖.无论如何,这是插件代码:
$.fn.extend({
dependsOn: function( $claimer ){
$dependent = $(this);
$claimer.change(function(){
alert( $dependent.attr('id') );
var $selected = $('option:selected', this);
var pk = $selected.attr('class');
$dependent.removeAttr('disabled');
$dependent.find('option').each(function(){
$hiddenOpts = $dependent.parent().find('.hiddenOptions');
$hiddenOpts.append( $(this) );
$hiddenOpts.find('option').each(function(){
if( $(this).attr('ref') == pk || $(this).hasClass('empty') )
$dependent.append( $(this) );
});
});
});
}
});
Run Code Online (Sandbox Code Playgroud)
当我调用时$('.something').dependsOn( $('.somethingElse') );,它工作正常,但如果我再次在另外两个项目上调用它,$ dependent变量将设置为THAT元素.
插件的要点是禁用选择框,直到更改上一个选择框.如果我有三个选择框成一排,我想第一个启用,依赖于第一第二个,第三个依赖于第二,我会打电话$(second).dependsOn( $(first) ),和$(third).dependsOn( $(second) ),因此改变第一则将使第二但不是第三个,而改变第二个将启用第三个.
但是使用当前代码,更改第一个启用第三个,但不是第二个(就像我说的,我认为这是因为$ dependent被覆盖并在调用dependsOn两次后设置为第三个).
如果不清楚,请告诉我.
为单个样式启用CSS过渡非常容易,但是是否可以为单个样式禁用它们?
单一样式转换的常用方法是:
div
{
transition: opacity 0.5s;
}
Run Code Online (Sandbox Code Playgroud)
但我想做的是设置全局转换,然后为单个属性禁用它.也许是这样的?
div
{
transition: 0.5s opacity 0s;
}
Run Code Online (Sandbox Code Playgroud)
这有可能吗?
编辑 我不想禁用元素的所有转换,我想禁用元素的一个转换.即我希望所有属性都转换为EXCEPT不透明度.
这是一个小提琴演示:http://jsfiddle.net/jakelauer/QSJXV/
我知道你可以在这样的类中进行导入:
.my-class
{
@import "another-file.scss";
}
Run Code Online (Sandbox Code Playgroud)
这样一类.foo在another-file.scss将编译到.my-class .foo输出。
我想要做的是导入一个文件,这样文件中的所有规则都会添加一个特定的类,如下所示:
.my-class
{
&@import "another-file.scss";
}
Run Code Online (Sandbox Code Playgroud)
这样.fooinanother-file.scss将编译到.my-class.foo输出中。
我正在构建一组共享一个类的组件,因为它们都是同一个“套件”的一部分,我希望它们都共享一个表示它们的类,但我不想让它们全部在一个巨大的巢穴下的同一个文件中。
这可能吗?
谢谢!
违规网址是:
我对这些类型的URL的.htaccess规则如下:
RewriteRule ^face/(.*)$ face.php?term=$1
如何使这两个网址转到同一页面,我该怎么办?
HTML
<div class='wrapper'>
<div class='elementContainer'>
This line should start halfway down the yellow box
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS
.wrapper
{
position: relative;
height: 300px;
width: 400px;
background: lightyellow;
border: 1px solid black;
}
.elementContainer
{
position: relative;
height: 200px;
width: 300px;
padding-top: 50%;
background: red;
}
Run Code Online (Sandbox Code Playgroud)
小提琴示例: http ://jsfiddle.net/jakelauer/s2ZXV/
在上面的例子中,.elementContainer有一个填充顶部50%.这应该根据父元素的(.wrapper)高度计算,这意味着它应该出来150px.相反,它出来了200px.这是怎么回事?
这是我以前从未见过的错误.
这是一个简单的复制品:https://jsfiddle.net/jakelauer/qr0ysmst/3/
const x = myVar => {
console.log(myVar);
for(let myVar of [1,2,3]){
console.log(myVar);
}
};
x(10);
Run Code Online (Sandbox Code Playgroud)
输出在Chrome: ,10,,1
在Safari浏览器输出:23SyntaxError: Cannot declare a let variable twice: 'myVar'.
想法?这是Safari中的错误吗?
编辑 - 值得注意的是,我不会故意这样做.我注意到它是因为我使用ASP.NET捆绑和缩小系统,并且该系统执行了此操作(因此我的网站在Safari中断了)
编辑2 - 有趣的是,这适用于两种浏览器
let x = 10;
for(let x of [1,2,3])
{
console.log(x);
}
Run Code Online (Sandbox Code Playgroud)