小编Jak*_*ake的帖子

可以在类删除时反转css动画吗?

基本上我正在尝试做的是当一个元素获得一个类时给它一个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)

html javascript css jquery css3

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

递归循环遍历对象以构建属性列表

情况:我有一个包含多个子和子子对象的大对象,其属性包含多种数据类型.出于我们的目的,此对象看起来像这样:

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: …

javascript object

50
推荐指数
5
解决办法
7万
查看次数

如何使用Visual Studio获得TypeScript的Vue.js 2.0类型?

我试图让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)

visual-studio typescript vue.js typescript-typings vuejs2

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

带有循环功能的<video>元素无法在Chrome或Firefox中无缝循环播放视频

<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/

html javascript video firefox google-chrome

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

调用两次时jQuery插件不起作用

我知道这是我编写插件以处理多个实例的方式的问题.我很确定至少有一个变量会被插件的每次后续调用覆盖.无论如何,这是插件代码:

$.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两次后设置为第三个).

如果不清楚,请告诉我.

javascript jquery jquery-plugins

6
推荐指数
1
解决办法
1787
查看次数

禁用单个样式的CSS过渡?

为单个样式启用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/

html css css3 css-transitions

6
推荐指数
2
解决办法
3641
查看次数

SCSS @import with &amp; to 孩子们上课

我知道你可以在这样的类中进行导入:

.my-class
{
    @import "another-file.scss";
}
Run Code Online (Sandbox Code Playgroud)

这样一类.fooanother-file.scss将编译到.my-class .foo输出。

我想要做的是导入一个文件,这样文件中的所有规则都会添加一个特定的类,如下所示:

.my-class
{
    &@import "another-file.scss";
}
Run Code Online (Sandbox Code Playgroud)

这样.fooinanother-file.scss将编译到.my-class.foo输出中。

我正在构建一组共享一个类的组件,因为它们都是同一个“套件”的一部分,我希望它们都共享一个表示它们的类,但我不想让它们全部在一个巨大的巢穴下的同一个文件中。

这可能吗?

谢谢!

sass

6
推荐指数
1
解决办法
615
查看次数

尾部斜线导致404,我可以使用htaccess修复吗?

违规网址是:

我对这些类型的URL的.htaccess规则如下:

RewriteRule ^face/(.*)$ face.php?term=$1

如何使这两个网址转到同一页面,我该怎么办?

php .htaccess

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

填充百分比如何工作?

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.这是怎么回事?

html css

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

Safari - SyntaxError:无法两次声明let变量

这是我以前从未见过的错误.

这是一个简单的复制品: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浏览器输出:23
SyntaxError: 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)

https://jsfiddle.net/jakelauer/aw37pd2s/1/

javascript safari google-chrome ecmascript-6

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