给列表项目拉长动漫,动漫操作

日期:2019-11-15编辑作者:前端科技

给列表项目拉长动漫

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

本文由 伯乐在线 - 刘健超-J.c 翻译,周进林 校稿。未经许可,禁绝转发!
日语出处:cssanimation.rocks。迎接参预翻译组。

当网页某有些爆发改动时,增添一些卡通有援救让客商知道发生了怎么样专门的工作。因为动漫能预先报告新内容的达到,大概让客户领会消息被移除。在那篇随笔里,将拜会到什么使用动漫帮衬新剧情的推荐,举例展现或掩瞒列表里的项目。

图片 1

(可在原来的小说查看效果卡塔 尔(英语:State of Qatar)

Dependencies(依赖的js库):

推荐介绍内容

卡通有个很好的用场,它亦可让访客知道你的网址内容在曾几何时发生了转移。当增多或删除内容而并未有别的动漫实行连接时,内容的突兀改造会让顾客以为纠结。而因而抬高细微的动漫片就会幸免这种场地产生,而且有帮衬“发布”有东西将要离开或引进页面。

以下是三个因而抬高或删除操作来保管列表内容的事例。大好些个卡通能用于此外门类的内容。借使你开掘它们是平价的,或有此外主见想增加进去,那么请 牵连我们,大家很愿意听听你的主见。

 

编写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”,正因为那是类名,大家将会在末端通过它为成分增加动漫功用。

bower.json

一些 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);
}

 

无动画

在最中央的功效中,大家能写一些 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。因为大家到现在还没动用动漫片,所以列表项目会一直出未来页面,像上面那样。当然你也得以点击列表项目,让它们没有。

图片 2

(可在原版的书文查看效果卡塔尔

复制代码

淡入淡出

用作第一个卡通,大家将会加多八个差相当的少的淡入淡出效果。相对早前的品种列表,该列表项目多了渐变效果。即便在视觉上看起来依旧有好几笨重,但那有助于让浏览者有更加长的年华去注意有东西正在转变。

图片 3

(可在原来的文章查看效果卡塔 尔(英语:State of Qatar)

因为要在已成立 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;
}

{

滑下&淡入淡出

老是增添或删除二个档期的顺体系表都会很突兀,那变成了不调治将养的效果。那就让大家透过调度高度来创建一个越来越流畅的滑动作效果果。

图片 4

(可在原作查看效果卡塔尔

此地与地方类名 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;
}

  "name": "angular-seed",

旋转进来

除此而外淡入淡出和滑动作效果果,还是能够特别地加上一些 3D 效果。浏览器不唯有能在 X 或 Y 轴上转换来分,还具备深度的光景( Z 轴)。

图片 5

(可在原来的小说查看效果卡塔尔国

为了设置那些效应,要求定义叁个 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 时间函数。

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

侧边旋转

到现在大家只要稍微调治那几个意义,就能够可怜便于地开创分裂的准备。下边那么些例子,是让项目列表在侧面旋转。

图片 6

(可在原来的小说查看效果卡塔尔

要开创那些意义,大家只需改动旋转轴。

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 了。

  "version": "0.0.0",

浏览器内核前缀和浏览器测量检验

为了可读性,上边这几个代码都不曾富含别的前缀。在那间,作者刚毅推荐加多前缀,以支撑这些须要 -webkit 或任何前缀的浏览器。而自个儿使用了 Autoprefixer 来消除那一个难题。

正因为这一个动漫片都以在着力的 show/hide 上创设的,所以它们在不帮衬那么些动漫片的浏览器上文雅地回降。在百废待举的装备和浏览器上海展览中心开测量试验是根本的,但当先三分之二今世浏览器都能支撑这几个动漫片。

打赏辅助本人翻译越多好小说,多谢!

打赏译者

  "homepage": "",

打赏援助小编翻译越来越多好文章,多谢!

任选生龙活虎种支付模式

图片 7 图片 8

赞 收藏 1 评论

  "license": "MIT",

关于作者:刘健超-J.c

图片 9

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

图片 10

  "private": true,

  "dependencies": {

    "angular": "1.2.x",

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

    "bootstrap": "~3.1.1",

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

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

    "jquery": "1.10.2",

    "angular-animate": "~1.2.x"

  }

}

复制代码

注:angular-animate要求单独下载,这里运用命令npm install可能 bower install就能够下载 angular-animate.js

 

   借使急需更加多动漫能够构成Jquery中的动画去得以完成必要.

 

angularjs中是怎样促成动漫的? 能够参谋API:

 

Template(模板)

 

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

 

复制代码

...

  <!-- for CSS Transitions and/or Keyframe Animations -->

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

  ...

  <!-- jQuery is used for JavaScript animations (include this before angular.js) -->

  <script src="bower_components/jquery/jquery.js"></script>

  ...

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

  <script src="bower_components/angular-animate/angular-animate.js"></script>

 

  <!-- for JavaScript Animations -->

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

 

...

复制代码

其API能够参见:ngAnimate

 

Module & Animations(组件和动画片)

 

app/js/animations.js.

 

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

  // ...

  // this module will later be used to define animations

  // ...

app/js/app.js

 

复制代码

// ...

angular.module('phonecatApp', [

  'ngRoute',

 

  'phonecatAnimations',

  'phonecatControllers',

  'phonecatFilters',

  'phonecatServices',

]);

// ...

复制代码

昨天,动漫效果已经被唤醒了.

 

Animating ngRepeat with CSS Transition Animations(使用CSS过渡效果去落到实处动漫效果)

 

复制代码

<ul class="phones">

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

      class="thumbnail phone-listing">

    <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>

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

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

  </li>

</ul>

复制代码

app/css/animations.css

 

复制代码

.phone-listing.ng-enter,

.phone-listing.ng-leave,

.phone-listing.ng-move {

  -webkit-transition: 0.5s linear all;

  -moz-transition: 0.5s linear all;

  -o-transition: 0.5s linear all;

  transition: 0.5s linear all;

}

 

.phone-listing.ng-enter,

.phone-listing.ng-move {

  opacity: 0;

  height: 0;

  overflow: hidden;

}

 

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

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

  opacity: 1;

  height: 120px;

}

 

.phone-listing.ng-leave {

  opacity: 1;

  overflow: hidden;

}

 

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

  opacity: 0;

  height: 0;

  padding-top: 0;

  padding-bottom: 0;

}

复制代码

此地都是透过class去牢固成分的,那么class是何时被成立的?

 

ng-enter  class 主要用于新加上的手提式有线电话机并渲染到页面中.

ng-move  class 首要用于当成分被移动时.

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

手提式有线电话机列表被加上和删除注重于ng-repeat指令,举个例子,即使过滤数据时,手机列表会动态的产出列表中.

 

starting class表示叁个就要早先的动漫

active class 表示一个将在甘休的卡通片

 在大家地方的事例中,成分的莫斯中国科学技术大学学变化从0到120像素当手提式有线话机被加多和移除时,同样有二个淡入淡出的效率,全数那些意义都以CSS transitions (CSS 转变器)达成的.CSS transitions 和 CSS animations对于当下主流的浏览器绝超过半数都有着很好的支撑,除了IE 9及其更低版本,若是想要一些卡通效果能够尝尝基本Javascript的动漫.

 

 

 

ngView

app/index.html.

 

<div class="view-container">

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

</div>

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.

 

那边运用ng-view代替ng-repeat,在这里地,ng-view指令被嵌套入三个view-container CSS类,那个类(class)增多了三个相对路线以便其动漫效果能够动态显现.下边将看其动漫的具体落实:

 

app/css/animations.css.

 

复制代码

.view-container {

  position: relative;

}

 

.view-frame.ng-enter, .view-frame.ng-leave {

  background: white;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

}

 

.view-frame.ng-enter {

  -webkit-animation: 0.5s fade-in;

  -moz-animation: 0.5s fade-in;

  -o-animation: 0.5s fade-in;

  animation: 0.5s fade-in;

  z-index: 100;

}

 

.view-frame.ng-leave {

  -webkit-animation: 0.5s fade-out;

  -moz-animation: 0.5s fade-out;

  -o-animation: 0.5s fade-out;

  animation: 0.5s fade-out;

  z-index:99;

}

 

@keyframes fade-in {

  from { opacity: 0; }

  to { opacity: 1; }

}

@-moz-keyframes fade-in {

  from { opacity: 0; }

  to { opacity: 1; }

}

@-webkit-keyframes fade-in {

  from { opacity: 0; }

  to { opacity: 1; }

}

 

@keyframes fade-out {

  from { opacity: 1; }

  to { opacity: 0; }

}

@-moz-keyframes fade-out {

  from { opacity: 1; }

  to { opacity: 0; }

}

@-webkit-keyframes fade-out {

  from { opacity: 1; }

  to { opacity: 0; }

}

复制代码

运用ngClass结合Javascript来完结动画效果

app/partials/phone-detail.html

 

复制代码

<div class="phone-images">

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

       class="phone"

       ng-repeat="img in phone.images"

       ng-class="{active:mainImageUrl==img}">

</div>

 

<h1>{{phone.name}}</h1>

 

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

 

<ul class="phone-thumbs">

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

    <img ng-src="{{img}}" ng-mouseenter="setImage(img)">

  </li>

</ul>

复制代码

卡通的准绳是留意"动",首若是岗位或形态的更换爆发的动的画面包车型客车进度.

 

其CSS样式如下:

app/css/app.css

 

复制代码

.phone-images {

  background-color: white;

  width: 450px;

  height: 450px;

  overflow: hidden;

  position: relative;

  float: left;

}

 

...

 

img.phone {

  float: left;

  margin-right: 3em;

  margin-bottom: 2em;

  background-color: white;

  padding: 2em;

  height: 400px;

  width: 400px;

  display: none;

}

 

img.phone:first-child {

  display: block;

  }

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

本文由今晚最快开奖现场直播发布于前端科技,转载请注明出处:给列表项目拉长动漫,动漫操作

关键词:

HTML第55中学与页面显示相关的API,HTML5提供了意气

HTML5中与页面展现相关的API 2015/05/15 · HTML5 ·HTML5 初藳出处:涂根华的博客    在HTML5中,扩充了2个与页面显示相关的...

详细>>

Chrome开发者工具不完全指南,谷歌Chrome浏览器开

Chrome开采者工具不完全指南(二、进级篇卡塔尔 2015/06/23 · HTML5 · 3评论 ·Chrome 原著出处:卖烧烤夫斯基    上篇向...

详细>>

污源回笼机制,质量进级篇

Chrome开拓者工具不完全指南(四、质量晋级篇卡塔 尔(英语:State of Qatar) 2015/07/05 · HTML5 ·Chrome 原著出处:卖撸串...

详细>>

跨域哀告,跨域访谈和防盗链基本原理

跨域访问和防盗链基本原理(二) 2015/10/18 · HTML5 ·跨域,防盗链 原文出处: 童燕群(@童燕群)    Asynchronous JavaS...

详细>>