快捷搜索:
来自 新京葡娱乐场网址 2019-06-15 15:51 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

新京葡娱乐场网址给列表项目增加动画,动画操

滑下&淡入淡出

老是增加或删除叁个品类列表都会很突兀,那致使了不和煦的功效。那就让大家通过调解中度来创制八个进一步流畅的滑行效果。

新京葡娱乐场网址 1

(可在最初的文章查看效果)

此间与位置类名 fade 唯一区别的是 height:2em 被移除掉了。因为类名 show 已包罗了三个中度(承继自第贰个CSS片段),那样高度就能够自动接通了。

CSS

.slide-fade li { transition: all 0.4s ease-out; opacity: 0; } .slide-fade li.show { opacity: 1; }

1
2
3
4
5
6
7
.slide-fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
}
.slide-fade li.show {
  opacity: 1;
}

starting class表示二个就要起首的动画片

侧面旋转

方今大家只要稍稍调节这些作用,就会丰硕轻巧地开创不一样的设计。下边那几个例子,是让项目列表在侧面旋转。

新京葡娱乐场网址 2

(可在原来的文章查看效果)

要开创这几个作用,大家只需改变旋转轴。

CSS

.swing li { opacity: 0; transform: rotateY(-90deg); transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76); }

1
2
3
4
5
.swing li {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

笔者们早已把 rotateX 改成 rotateY 了。

// ...

旋转进来

除开淡入淡出和滑动作效果果,还能够更进一步地增加一些 3D 效果。浏览器不唯有能在 X 或 Y 轴上转换元素,还兼具深度的情状( Z 轴)。

新京葡娱乐场网址 3

(可在原作查看效果)

为了设置那几个成效,要求定义一个 section 容器作为 3D 过渡的戏台。通过给 perspective 赋值就足以做到。

CSS 的 perspective 代表场景的纵深。二个相当的低的数值意味着近视角,是三个极度的角度。所以那值得你通过设置分化的值来找到一个稳妥的值。

CSS

.swing { perspective: 100px; }

1
2
3
.swing {
  perspective: 100px;
}

下一步是安装 li 成分在那么些舞台里的变形。咱们将会选择 opacity 创造淡入淡出效果作为起始,然后为在舞台上的 li 添加 transform 进行旋转。

CSS

.swing li { opacity: 0; transform: rotateX(-90deg); transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76); } .swing li.show { opacity: 1; transform: none; transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76); }

1
2
3
4
5
6
7
8
9
10
11
.swing li {
  opacity: 0;
  transform: rotateX(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}
 
.swing li.show {
  opacity: 1;
  transform: none;
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

在那几个事例中,让 li 绕X 轴向后旋转 90 度作为开首状态。当增加类名 show 时,它的 transform 被安装为 none,这就会让它在戏台上进展对接了。为了给它旋转效果,小编利用了 cubic-bezier 时间函数。

  <div ng-view class="view-frame"></div>

浏览器内核前缀和浏览器测试

为了可读性,上面那多少个代码都并未有包罗别的前缀。在这里,笔者刚烈推荐增添前缀,以支撑那个急需 -webkit 或别的前缀的浏览器。而自己利用了 Autoprefixer 来解决那些主题素材。

正因为这么些动画片都以在中央的 show/hide 上创设的,所以它们在不接济这几个动画片的浏览器上优雅地回退。在错综相连的配备和浏览器上海展览中心开测试是第一的,但大多数当代浏览器都能支持这一个动画片。

打赏辅助作者翻译越多好小说,多谢!

打赏译者

  float: left;

编写HTML代码

在一初叶,筹划好一个已提早填充好的列表和一个得感到该列表增添新品类的开关。

XHTML

<ul id="list"> <li class="show">List item</li> <li class="show">List item</li> </ul> <button id="add-to-list">Add a list item</button>

1
2
3
4
5
<ul id="list">
<li class="show">List item</li>
<li class="show">List item</li>
</ul>
<button id="add-to-list">Add a list item</button>

但有一点地点要求小心。首先,在HTML代码里有三个 ID。一般的话,大家不会用 ID 来安装样式,因为它们的唯一性会引进一些标题。然则,它们会在行使 JavaScript 时提供了便利性。

始于列表项目有类名 “show”,正因为这是类名,大家将会在后头通过它为要素增添动画成效。

       ng-repeat="img in phone.images"

关于小编:刘健超-J.c

新京葡娱乐场网址 4

前端,在路上... 个人主页 · 笔者的小说 · 19 ·     

新京葡娱乐场网址 5

  height: 120px;

淡入淡出

用作第一个卡通,大家将会增加四个简练的淡入淡出效果。相对从前的花色列表,该列表项目多了渐变效果。固然在视觉上看起来如故有少数笨重,但那有利于让浏览者有更加长的年月去注意有东西正在变化。

新京葡娱乐场网址 6

(可在原版的书文查看效果)

因为要在已创立 CSS 片段上增添效果。所以为了在列表上行使这些效应,须求在包围 li 的器皿上增多类名 fade

CSS

.fade li { transition: all 0.4s ease-out; opacity: 0; height: 2em; } .fade li.show { opacity: 1; }

1
2
3
4
5
6
7
8
.fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
  height: 2em;
}
.fade li.show {
  opacity: 1;
}

复制代码

无动画

在最基本的功力中,大家能写一些 CSS 代码显示列表项目。因为加多类名 show 让它们可知,所以删掉类名 show 也能导致它们未有。

CSS

li { list-style: none; background: #d1703c; color: #fff; height: 0; line-height: 2em; margin: 0; padding: 0 0.5em; overflow: hidden; width: 10em; } li.show { height: 2em; margin: 2px 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
li {
  list-style: none;
  background: #d1703c;
  color: #fff;
  height: 0;
  line-height: 2em;
  margin: 0;
  padding: 0 0.5em;
  overflow: hidden;
  width: 10em;
}
 
li.show {
  height: 2em;
  margin: 2px 0;
}

那一个样式将 li 设置为七个尚未项目顺应、height 为 0、margin 为 0和 overflow 为 hidden 的矩形。那样做是为了直到增添类名 show,它们才会产出而变得可知。

类名 show 应用了 height 和 margin。因为大家现今还没利用动画片,所以列表项目会一贯出以往页面,像下面那样。当然你也足以点击列表项目,让它们未有。

新京葡娱乐场网址 7

(可在原来的作品查看效果)

angular.module('phonecatAnimations', ['ngAnimate']);

打赏支持笔者翻译愈多好小说,感激!

任选一种支付办法

新京葡娱乐场网址 8 新京葡娱乐场网址 9

赞 收藏 1 评论

  'phonecatFilters',

推荐介绍内容

动画片有个很好的用处,它能够让访客知道您的网址内容在几时爆发了改观。当增添或删除内容而从未别的动画举办交接时,内容的黑马改动会让用户认为纳闷。而透过增添细微的卡通片就能够幸免这种景观时有爆发,并且有助于“揭橥”有东西将在离开或引入页面。

以下是贰个经过抬高或删除操作来管理列表内容的例证。大好多动画能用来别的门类的内容。如若你发觉它们是实用的,或有别的主见想加多进去,那么请 关系我们,大家很情愿听听你的主张。

    <p>{{phone.snippet}}</p>

一些 JavaScript 代码

为了促成演示里的卡通片,将会编写一些 JavaScript 代码来加多新列表项目,然后为新扩大加列表项目增多类名 “show”,以致动画能够产生。使用那三个步骤的理由是,纵然列表项目一贯以可知的气象增加进去,它们就从未有过其余衔接时间而平素发生了。

咱俩准备在 li 成分上运用动画片效果,但那将会让通过覆盖样式来增加任何删除成分的动画片效果,变得尤其不便。

JavaScript

/* * Add items to a list - from cssanimation.rocks/list-items/ */ document.getElementById('add-to-list').onclick = function() { var list = document.getElementById('list'); var newLI = document.createElement('li'); newLI.innerHTML = 'A new item'; list.appendChild(newLI); setTimeout(function() { newLI.className = newLI.className " show"; }, 10); }

1
2
3
4
5
6
7
8
9
10
11
12
/*
* Add items to a list - from cssanimation.rocks/list-items/
*/
document.getElementById('add-to-list').onclick = function() {
  var list = document.getElementById('list');
  var newLI = document.createElement('li');
  newLI.innerHTML = 'A new item';
  list.appendChild(newLI);
  setTimeout(function() {
    newLI.className = newLI.className " show";
  }, 10);
}

复制代码

给列表项目增加动画

2015/05/08 · CSS, HTML5, JavaScript · 1 评论 · 动画

本文由 伯乐在线 - 刘健超-J.c 翻译,周进林 校稿。未经许可,禁止转发!
英文出处:cssanimation.rocks。欢迎插足翻译组。

当网页某部分发生转移时,增加一些动画片有利于让用户驾驭爆发了怎么业务。因为动画能预先报告新剧情的达到,也许让用户知道音信被移除。在那篇文章里,将相会到哪些运用动画帮忙新剧情的推荐介绍,举例展现或隐藏列表里的档案的次序。

新京葡娱乐场网址 10

(可在原来的作品查看效果)

 

  background: white;

 

 

// ...

  overflow: hidden;

  from { opacity: 0; }

 

 

应用ngClass结合Javascript来落到实处动画效果

 

  -o-animation: 0.5s fade-in;

Template(模板)

 

 

.phone-listing.ng-leave {

 

复制代码

 

app/js/animations.js.

angularjs中是什么样贯彻动画的? 能够参谋API:

}

ng-leave  class首要用来被删去时.

  padding-bottom: 0;

  to { opacity: 0; }

 

  from { opacity: 0; }

]);

.phone-listing.ng-move {

}

.phone-listing.ng-move.ng-move-active,

  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"

  <li ng-repeat="img in phone.images">

 

    "angular-route": "~1.2.x",

 

}

ng-enter  class 首要用来新添长的手提式有线电话机并渲染到页面中.

app/js/app.js

  transition: 0.5s linear all;

 

@-webkit-keyframes fade-out {

.view-container {

 

Module & Animations(组件和卡通)

  animation: 0.5s fade-in;

</div>

  background-color: white;

  <!-- required module to enable animation support in AngularJS -->

@-moz-keyframes fade-in {

    <a href="#/phones/{{phone.id}}">{{phone.name}}</a>

</ul>

app/css/animations.css.

  opacity: 1;

 

注:angular-animate须求单独下载,这里运用命令npm install或许 bower install就可以下载 angular-animate.js

复制代码

  'ngRoute',

.phone-listing.ng-leave,

  to { opacity: 1; }

<div class="view-container">

       class="phone"

  "description": "A starter project for AngularJS",

  animation: 0.5s fade-out;

此间运用ng-view取代ng-repeat,在此间,ng-view指令被嵌套入贰个view-container CSS类,那一个类(class)加多了三个相对路线以便其动画效果能够动态显现.上边将看其动画的实际落成:

.phone-listing.ng-leave.ng-leave-active {

  'phonecatServices',

  z-index: 100;

app/index.html.

@keyframes fade-out {

<ul class="phones">

  "license": "MIT",

 

{

}

  </li>

  }

}

复制代码

  -moz-animation: 0.5s fade-in;

  display: none;

首先,引入angular-animate.js文件,如下:

  "version": "0.0.0",

  left: 0;

  padding-top: 0;

复制代码

    "jquery": "1.10.2",

  -moz-transition: 0.5s linear all;

): bower.json 复制代码 { name: angular-seed, description: A starter project for AngularJS, version: 0.0.0, homepage: ...

  }

}

  position: absolute;

  -moz-animation: 0.5s fade-out;

 

img.phone {

 

 

  -webkit-animation: 0.5s fade-in;

  from { opacity: 1; }

@-moz-keyframes fade-out {

其CSS样式如下:

.phone-listing.ng-enter.ng-enter-active {

}

.phone-listing.ng-enter,

  overflow: hidden;

With this change, the ng-view directive is nested inside a parent element with a view-container CSS class. This class adds aposition: relative style so that the positioning of the ng-view is relative to this parent as it animates transitions.

    "angular-resource": "~1.2.x",

  <img ng-src="{{img}}"

 

  opacity: 0;

  height: 400px;

.view-frame.ng-enter {

 

  <link rel="stylesheet" href="css/animations.css">

 

  height: 0;

  <script src="js/animations.js"></script>

<ul class="phone-thumbs">

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:新京葡娱乐场网址给列表项目增加动画,动画操

关键词: