小编seb*_*ier的帖子

具有延迟的纯CSS动画可见性

我试图在没有Javascript的情况下在 onLoad上实现一些动画.JS很简单,CSS就是......不行.

我有div这应该是对display: none;,应该是display: block;后3个secondes.很多资源告诉我动画不起作用display,但应该与visibility(我经常在我的过渡中使用).

对,知道我有这个可怕的javascript函数:

<script type="text/javascript">
    $(document).ready(function(){
        $(".js_only").hide();
        setTimeout(function () {
            $(".js_only").show();
        }, 3000);
    });
</script>
Run Code Online (Sandbox Code Playgroud)

我在CSS中尝试了一些动画但没有结果......似乎没有任何效果.

我的页面中有很少的动画,但只是display: none;在动画上挣扎.

@-moz-keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }

}
@-webkit-keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }

}
@keyframes showEffect {
    0% { display: none; visibility: hidden; } …
Run Code Online (Sandbox Code Playgroud)

css css3 css-animations

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

根据git状态在SublimeText树视图中着色文件?

我喜欢sublimeText,从现在开始每天使用它.我正在寻找一个功能:在我的文件列表(左侧面板)中,我想着色未跟踪,忽略和修改的文件夹和文件.

这个功能是Atom的一部分,但我很惊讶在Sublime中没有这样的东西.我已经是" Git Config "," GitGutter "和" GitSavvy ".

这是我想要的例子:

着色未跟踪,忽略和修改的文件夹和文件

有没有人听说过这样的事情?我真的开始怀疑是否有可能为那些着色?可能是这个原因?有没有人见过一个类似功能的包?

感谢阅读/帮助;)

git sublimetext sublimetext2 sublimetext3 sublime-text-plugin

17
推荐指数
1
解决办法
3035
查看次数

带有导航(下一个,上一个)按钮的 CSS 滚动捕捉点

我正在使用CSS snap points构建一个非常简约的旋转木马。对我来说只有CSS 选项很重要,但我可以用javascript没有框架)增强一点。

我正在尝试添加上一个和下一个按钮以编程方式滚动到下一个或上一个元素。如果 javascript 被禁用,按钮将被隐藏并且轮播仍然起作用。

我的问题是如何触发滚动到下一个捕捉点

所有项目都有不同的大小,我发现的大多数解决方案都需要像素值(如scrollBy示例中使用的)。AscrollBy 40px适用于第 2 页,但不适用于其他页面,因为它们太大(基于视口的大小)。

function goPrecious() {
  document.getElementById('container').scrollBy({ 
    top: -40,
    behavior: 'smooth' 
  });
}

function goNext() {
  document.getElementById('container').scrollBy({ 
    top: 40,
    behavior: 'smooth' 
  });
}
Run Code Online (Sandbox Code Playgroud)
#container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;

  border: 2px solid var(--gs0);
  border-radius: 8px;
  height: 60vh;
}

#container div {
  scroll-snap-align: start;

  display: flex;
  justify-content: center;
  align-items: …
Run Code Online (Sandbox Code Playgroud)

javascript css frontend scroll

10
推荐指数
3
解决办法
5358
查看次数

如何使用angular-translate翻译日期对象?

我的视图中有一个日期列表,由我的控制器提供支持.我使用angular-translate来管理我的所有应用程序中的本地化,但不知道如何处理日期对象.

我的HTML看起来像这样:

<div ng-repeat="date in nextDates">
    <div class="day">{{date | date: 'EEEE'}}</div>
</div>
Run Code Online (Sandbox Code Playgroud)

此代码显示一天的列表:星期一,星期二,...基于date哪个是日期对象.

我的第一次尝试是使用已经在这个项目中使用的moment.js,并且与i18n进行了很好的交易.它工作正常,但是当用户改变lang时我很难更新它,因为moment.js与angular-translate无关.

我尝试在我的控制器上使用事件来实现它来更新我的变量,但效果不佳.我想在我的视图中保留对象日期而不是有一个时刻对象,我确信有一种方法不能手动实现它.

$scope.$on('translationChanged', function(event, lang) {
    ...
});
Run Code Online (Sandbox Code Playgroud)

我想知道是否有一种简单的方法来解决这个问题,我唯一的想法是生成一个像DAY.0周一一样的翻译密钥,DAY.1并自己翻译,但听起来很便宜.moment.js对于这项工作来说似乎很完美,但是如何将它与angular-translate联系起来呢?

谢谢阅读.

angularjs momentjs angular-translate

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

为什么我的:主动选择器在比例变换时失去其单击事件状态?

我为网站设计了一个按钮,并试图添加transform: scale(0.95);一个click事件(使用:activateCSS选择器).

a.btn, input[type="submit"].btn, label.btn, button.btn {
  text-transform: uppercase;
  border: solid 1px #282828;
  font-size: 11px;
  line-height: 17px;
}
a.btn:active, input[type="submit"].btn:active, label.btn:active, button.btn:active {
  transform: scale(0.95);
}
Run Code Online (Sandbox Code Playgroud)
<input type="submit" value="Show more recipes" class="btn"/>
Run Code Online (Sandbox Code Playgroud)

如果用户单击按钮的边框,则:active状态会缩小图标,并且光标不再覆盖按钮,并且可能不再触发click事件.如果用户在scale(0.95)区域内单击,则会正常触发click事件.

缩放点击示例

我试图保持点击事件; 我试图应用一个看不见的:before面板但没有成功,因为input[type='submit']它不支持它,并且希望有人已经解决了这个问题.

编辑1月14日:现在使用input[type='submit']不能包含元素的问题重写了问题.

html css css3

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

Angularjs $q 按顺序运行

遇到了angularjs和一些承诺的问题。由于某种原因,我的服务混合了查询的答案,虽然服务已修复,但我需要将 $q.all() 更改为按顺序运行,而不是异步运行所有承诺

现在,它看起来像这样:

var promises = [p1, p2, p3];

$q.all(promises).then(function () {
    // All promises are done
}).catch(function (exception) {
    // An error occured.
});
Run Code Online (Sandbox Code Playgroud)

预期的行为应该类似于p1.then(p2).then(p3);,并且顺序并不重要(因为通常运行异步)。数组长度是可变的。

由于 $q 受到 Q lib 的启发,我查看了 Q 文档并找到了序列参考,但无法使其与 $q 一起使用。

任何人都可以推荐一个简单的解决方案来解决此类问题吗?

我确实尝试过这个promises.reduce($q.when, $q(initialVal));,但不明白initialVal指的是什么:(

感谢您的阅读,祝您有美好的一天。

javascript angularjs angular-promise

2
推荐指数
1
解决办法
2493
查看次数