- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前正在编写一个脚本,该脚本将在元素进入用户视口(viewport)时对其进行动画处理,就像 WOW.js 一样。
但是,我遇到了一些我打算制作动画的元素的奇怪行为。它不是从关键帧的第一步开始动画,而是忽略未在原始元素上设置的任何样式。
考虑一下:
setTimeout(function() {
$('#some_element').addClass('animated fade_in_down');
}, 500);
/* The element I intend to animate */
#some_element {
width: 50px;
height: 50px;
background: #000;
opacity: 0; /* I set the initial opacity */
/* NOTE - I have not set transform:translateY(-20px); */
}
/* The animation classes */
.animated {
animation-duration: 1s;
animation-fill-mode: both /* I think this is the important part */
}
.fade_in_down {
animation-name: fade_in_down
}
@keyframes fade_in_down {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="some_element">
因此,如果您运行上面的代码片段,您会发现动画按预期运行。比如,它淡入并转换为 20px...
我的问题是,在我的网站上,它忽略了 transform
属性,除非我在原始 #some_element
样式中明确设置它。
除非我执行以下操作,否则我只会看到 opacity
动画:
#some_element {
width: 50px;
height: 50px;
background: #000;
opacity: 0;
transform:translateY(-20px); /* I have added the initial transform value */
}
这是为什么?为什么它无需设置初始 transform
值就可以在其他站点上运行?任何人都可以详细说明可能导致这种情况的原因吗?
我正在使用 CSS 缩小器,它会去除 0
之后的 %
符号 @keyframes
规则。这可能是原因吗?去掉%
符号是不是无效?
不幸的是,我无法发布我的全部代码,因为这只是一个非常大的网络应用程序的片段。我希望有人可能知道发生了什么,而无需查看我的整个代码...
最佳答案
原因:
问题要么是因为您对 @keyframes
的编码方式规则在你的实际 CSS 文件中(或)因为你的缩小器如何缩小代码。
下面是我可以在您的缩小 CSS 文件中看到的输出 CSS。正如您在 @keyframes
中看到的那样, %
在 0
之后丢失.该百分比是强制性的,因为它不存在,所以 UA 完全忽略了它下设置的属性,因此原始负数 translateY
从未应用于它。由于从未应用原始变换,因此它不会向下滑动而只是出现。
来自W3C Specs for Animation : (重点是我的)
Note that the percentage unit specifier must be used on percentage values. Therefore, ‘0’ is an invalid keyframe selector.
opacity
有效是因为你有 .reveal-on-scroll
这迫使 opacity: 0
在元素上。
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.fade_in_down {
-webkit-animation-name: fade_in_down;
animation-name: fade_in_down
}
@-webkit-keyframes fade_in_down {
0 { /* note the missing % symbol */
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes fade_in_down {
0 { /* note the missing % symbol */
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
}
演示:
只是为了演示这一点,我在下面的演示中添加了两个元素,其中一个元素带有 %
的动画。之前 0
在@keyframes
规则和其他没有它的(%
)。关键帧写为0%
的一个会正常下滑而关键帧写为0
的那个就会出现。
setTimeout(function() {
$('#some_element').addClass('animated fade_in_down');
$('#some_element2').addClass('animated fade_in_down2');
}, 500);
#some_element,
#some_element2 {
display: inline-block;
width: 50px;
height: 50px;
background: #000;
opacity: 0;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both
}
.fade_in_down {
animation-name: fade_in_down
}
@keyframes fade_in_down {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* this is how the minified output in your CSS file is */
.fade_in_down2 {
animation-name: fade_in_down2
}
@keyframes fade_in_down2 {
0 {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="some_element"></div>
<div id="some_element2"></div>
解决方案:
如果您的原始 CSS 中缺少该符号,请添加它。如果缩小器将其删除,请查看如何避免这种情况。不幸的是,我对此知之甚少。
关于jquery - 忽略初始值的动画 (animation-fill-mode),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36130791/
我想使用 linux 终端在 .txt 文档中找到字符串 animal-0**。 ** 是从 60 到 69 的数字。我想我必须在命令中使用 grep 和正则表达式:grep -E 'animal-0
在他的C# 深入一书中,Jon Skeet 试图回答以下问题: Why can't I convert List to List? 为了解释它,他从一个代码片段开始,其中包括以下两行: Animal[
我对此有点困惑,所以希望能提供一些说明。 public void addAll(List animals) 对比 public void addAll(List animals) 最佳答案 区别在于
我遇到的情况是,我有许多CALayer以“基于回合”的方式进行动画处理。我为每个CALayer上的位置设置了动画,但是它们具有完全相同的持续时间。一旦所有这些CALayer动画完成,就会启动一个新的“
我为正在拔出的刀和空闲状态设置了动画,但是无论我做什么,它们都不会在游戏中设置动画。相反,它卡住在第一帧上。这是动画窗口运行时的样子: 动画: 在检查器中: 最佳答案 我遇到了类似的问题,它归结于动画
我的单个 HTML 文件中嵌入了 2 个页面。所以它所做的是最初它显示 PAGE1,然后如果我从右向左或从左向右滑动 PAGE2 应该显示。我的问题是如何根据我的滑动更改页面动画?比如当我从右向左滑动
我想做一个动画标题。 我创建了一个 FlatList 的动画组件, 用过 onScroll函数来更新动画值。 使用绝对位置放置一个 View (Animated.View) 作为动画 FlatList
我想制作一个打开的窗帘的动画。我有两张图像:一张用于窗帘的左侧,一张用于窗帘的右侧(以红色表示)。我想用核心动画顺利地将它们滑走。我应该寻找什么类型的动画?如何实现逼真的滑动风格? 问候, 斯特凡 a
我有一个简单的旋转动画,可以让一个对象绕其轴旋转。目前它旋转得太快了,我想减慢速度,我试过增加样本??但我对动画了解不多,所以我可能过得很好。如何放慢动画速度?它只有两个键。 最佳答案 首先,通过双击
我似乎无法在上类时获得 angularjs ng-animate,而且在野外似乎也没有任何示例。以演示 fiddle 为例: http://jsfiddle.net/yfajy/ 向 CSS 添加如下
使用以下代码段:http://jsfiddle.net/sylouuu/V7a3Y/2/ 我想在动画的#log 中显示从 0% 到 100% 的进度百分比,100% 很容易通过回调... 有可能这样做
我正在 HTML 中使用 SVG 来使用折线工具定义特定的形状。我希望通过按一下按钮并在几秒钟内将特定形状的外观动画化为不同的形状。 我一直在考虑使用动画工具来更改折线点属性,但到目前为止一直无法找到
您好,在 Firefox(相当糟糕)和 Chrome 之间获得可变性能和效果(还可以)有时这不会执行第一个动画,有时会卡住。 我的结构正确吗? $notification.animate({
我在 iOS 编程时遇到了一个问题:当我尝试为我的 tableView 制作自定义编辑按钮时,我无法将其设置为动画。下面是我如何初始化 tableview: - (void)viewWillAppea
自 beta 5 以来,我注意到在 OS X 10.10 下隐式动画有一些奇怪的行为。调用动画代理有时会导致应用程序崩溃。我设置了一个非常简单的自定义 View 。这是完整的代码: import Co
我正在开发一个可折叠组件,您可以单击它来向上/向下滚动以显示/隐藏详细信息。组件如下: // component.ts import {Component, Directive, Input} fro
我正在努力了解 web animations standard和他们的 polyfill ,正如我所见,它在 Angular 动画库中运行良好(您将动画结束值设置为“*”,这将变为 div 大小的 1
我想创建一个动画闪屏,但出现此错误: Android.Content.Res.Resources+NotFoundException: File res/drawable/splash_screen.
我正在尝试对我的应用程序应用慢动作效果,就像按 Shift 时如何减慢 Mac OS 的大多数图形效果一样。 我的应用程序使用 CoreAnimation,所以我认为它应该没什么大不了的:set sp
我想以编程方式同时不在XML文件中显示两个动画,它应该 ROTATE和TRANSLATE 我怎样才能做到这一点? 请以某种方式建议我?????? 这是ma代码:> ImageView snowImg1
我是一名优秀的程序员,十分优秀!