澳门新莆京手机网站-新蒲京娱乐场 > 联系我们 > vue走入/离开 & 列表过渡

vue走入/离开 & 列表过渡

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

  height: 0;

.fade-enter,.fade-leave-to{

当transition遇上display

2016/01/13 · CSS · 5 评论 · display, transition

原作出处: 穷游网设计划委员会员会   

相信大家在试用css3动漫片时候鲜明用过transition属性,相对于js动漫来讲用起来更便捷轻便。
代码如下:
HTML结构:

XHTML

<div id="box"></div> <button>动画开关</button>

1
2
<div id="box"></div>
<button>动画按钮</button>

CSS代码:

CSS

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px auto; transition: all .4s linear; /*display: block;*/ } .hidden { /*display: none;*/ opacity: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    /*display: block;*/
}
 
.hidden {
    /*display: none;*/
    opacity: 0;
}

JS代码

JavaScript

var box = $('#box'); $('button').on('click', function () { if(box.hasClass('hidden')){ box.removeClass('hidden'); }else{ box.addClass('hidden'); } });

1
2
3
4
5
6
7
8
var box = $('#box');
$('button').on('click', function () {
    if(box.hasClass('hidden')){
        box.removeClass('hidden');
    }else{
        box.addClass('hidden');
    }
});

在点击按键后得以看到淡入淡出的卡通效果,不过在css代码中革除对于display属性的两段注释未来,再张开浏览器生机勃勃看,淡入淡出的意义全没了。
这简直是破坏性的功力,然后笔者度娘了后生可畏晃总括了几个措施。

先是种方法:将display用visibility来代表,咱们都领会visibility的效能其实跟display在听天由命程度上相通,那为啥说只是一定水准上相仿呢,因为它照旧是占空间的,那你势必会说,这么用跟opacity没啥差异呀。但却得以制止遮挡上面包车型地铁层举个例子按键的点击事件。

其次种办法是相对于第黄金年代种格局的进级,利用了js的setTimout和transitionend事件
css代码 将class hidden类中的opacity抽离出来

CSS代码:

CSS

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px auto; transition: all .4s linear; visibility: visible; } .hidden { display: none; } .visuallyhidden { opacity: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    visibility: visible;
}
.hidden {
    display: none;
}
.visuallyhidden {
    opacity: 0;
}

js代码

JavaScript

var box = $('#box'); $('button').on('click', function () { if (box.hasClass('hidden')) { box.removeClass('hidden'); setTimeout(function () { box.removeClass('visuallyhidden'); }, 20); } else { box.addClass('visuallyhidden'); box.one('transitionend', function(e) { box.addClass('hidden'); }); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var box = $('#box');
$('button').on('click', function () {
    if (box.hasClass('hidden')) {
        box.removeClass('hidden');
        setTimeout(function () {
            box.removeClass('visuallyhidden');
        }, 20);
    } else {
        box.addClass('visuallyhidden');
        box.one('transitionend', function(e) {
            box.addClass('hidden');
        });
    }
});

其二种办法与第两种艺术形似,用requestAnimationFrame来替代setTimeout,相应的退换了if条件里的js。
requestAnimationFrame其实也就跟setTimeout/setInterval大约,通过递归调用同一方法来不断更新画面以达成动起来的功效,但它优于setTimeout/setInterval的地点在于它是由浏览器特意为卡通提供的API,在运作时浏览器会自行优化措施的调用,而且只要页面不是激活状态下的话,动漫会自动行车制动器踏板,有效节约了CPU花销。

js代码如下

JavaScript

var box = $('#box'); $('button').on('click', function () { if (box.hasClass('hidden')) { box.removeClass('hidden'); requestAnimationFrame(function(){ box.removeClass('visuallyhidden'); }); } else { box.addClass('visuallyhidden'); box.one('transitionend', function(e) { box.addClass('hidden'); }); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var box = $('#box');
$('button').on('click', function () {
    if (box.hasClass('hidden')) {
        box.removeClass('hidden');
        requestAnimationFrame(function(){
            box.removeClass('visuallyhidden');
        });
    } else {
        box.addClass('visuallyhidden');
        box.one('transitionend', function(e) {
            box.addClass('hidden');
        });
    }
});

以上正是当transition遇上display时遇上的坑。

1 赞 5 收藏 5 评论

图片 1

推荐介绍内容

卡通有个很好的用处,它能够让访客知道您的网址内容在哪天产生了改过。当增多或删除内容而从未别的动漫实行联网时,内容的豁然改换会让顾客感到纠结。而通过添加细微的卡通就能够制止这种气象爆发,而且有利于“公布”有东西将在离开或引入页面。

以下是二个通过抬高或删除操作来治本列表内容的例证。大相当多动漫片能用来其余品类的剧情。假使您意识它们是有效的,或有其余主张想增加进去,那么请 牵连大家,大家很乐意听听你的主见。

img.phone:first-child {

                    ul>

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

为了可读性,上边那多少个代码都不曾包蕴别的前缀。在这里处,作者猛烈推荐加多前缀,以支撑这些需求 -webkit 或别的前缀的浏览器。而作者使用了 Autoprefixer 来化解那么些难题。

正因为那一个动画片皆以在大旨的 show/hide 上营造的,所以它们在不援助那几个动漫片的浏览器上温婉地回降。在各式各样的装置和浏览器上开展测量试验是首要的,但大部分现代浏览器都能支持那么些动漫片。

打赏扶持小编翻译更多好小说,感激!

打赏译者

其CSS样式如下:

Vue 提供了 transition 的卷入组件,在下列情况中,能够给其余因素和构件加多entering/leaving 过渡

旋转进来

除此之外淡入淡出和滑动作效果果,仍为能够更进一层地加上一些 3D 效果。浏览器不仅仅能在 X 或 Y 轴上调换到分,还具有深度的景观( Z 轴卡塔尔国。

图片 2

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

为了设置这一个成效,供给定义多个 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 时间函数。

<ul class="phones">

                transition>

淡入淡出

用作第2个卡通,大家将会增添四个简练的淡入淡出效果。相对之前的门类列表,该列表项目多了渐变效果。即使在视觉上看起来依旧有某个笨重,但那便于让浏览者有更加长的时间去注意有东西正在转换。

图片 3

(可在原来的小说查看效果)

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

复制代码

                    <ul class="submenu" v-if="!show">

滑下&淡入淡出

老是增加或删除三个种类列表都会很突兀,那造成了不和谐的效能。那就让大家通过调治中度来创立二个更为流畅的滑动作效果果。

图片 4

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

此地与地方类名 fade 独一分裂的是 height:2em 被移除掉了。因为类名 show 已包涵了多个莫斯中国科学技术大学学(世襲自首个CSS片段State of Qatar,那样中度就能够自行接入了。

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;
}

  to { opacity: 0; }

组件根节点

无动画

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

图片 5

(可在原著查看效果)

 

    <transition name="fade">

编写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”,正因为那是类名,大家将会在前边通过它为要素增添动漫效率。

 

<CSS>

打赏扶植笔者翻译更多好作品,多谢!

任选生机勃勃种支付办法

图片 6 图片 7

赞 收藏 1 评论

{

                        <li>首页2li>

给列表项目增加动画

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

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

当网页某部分产生变动时,增多一些卡通有援救让顾客领悟发生了怎么业务。因为动画能预报新剧情的达到,或然让顾客精通音讯被移除。在此篇小说里,将拜会到什么样选择动漫支持新内容的引荐,举个例子突显或隐敝列表里的类型。

图片 8

(可在最先的小说查看效果)

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

    transition>

左边旋转

当今我们尽管稍微调解那一个成效,就会十二分轻松地创设分裂的两全。下面这一个事例,是让项目列表在左边旋转。

图片 9

(可在原来的小说查看效果)

要成立这一个成效,大家只需改动旋转轴。

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

 

div>

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

图片 10

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

图片 11

  z-index: 100;

   <button @click="show = !show">Tigglebutton>

@-webkit-keyframes fade-out {

                <transition name="fade">

  // ...

            <li>

  "private": true,

    data:{

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

    }

 

.fade-enter-active,.fade-leave-active{

Animating ngRepeat with CSS Transition Animations(使用CSS过渡效果去完成动漫效果卡塔尔(قطر‎

            <li><a href="#">关于大家a>li>

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

        <p v-if="show">hellop>

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

            li>

  'phonecatControllers',

规格显得 (使用 v-show卡塔尔国

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

                        <li>首页3li>

      class="thumbnail phone-listing">

常用的交接都以css过渡

 

            <li><a href="#">历史a>li>

]);

vue步入/离开 & 列表过渡

Vue 在插入、更新或许移除 DOM 时,提供多样分化情势的行使接入效果。

席卷以下工具:

在 CSS 过渡和动漫片中自动应用 class

能够包容使用第三方 CSS 动漫库,如 Animate.css

在连片钩子函数中运用 JavaScript 间接操作 DOM

能够相配使用第三方 JavaScript 动漫库,如 Velocity.js

 

    nav>

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

}

  width: 450px;

            <li><a href="#">联系大家a>li>

复制代码

    transition: opacity 0.5s;

.phone-listing.ng-enter,

    <nav class="nav">

  opacity: 0;

    opacity:0;

 

    el:'#demo',

       ng-repeat="img in phone.images"

                        <li>首页5li>

 

            <li><a href="#">理念a>li>

  position: absolute;

基准渲染 (使用 v-ifState of Qatar

复制代码

})

  background-color: white;

                <a href="#" @click="show = !show">首页a>

  -webkit-animation: 0.5s fade-out;

        show :true

 

}

...

        ul>

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

                        <li>首页4li>

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

**vue知识点**

1.*v-on:click  简写成 @click

2.对此这一个在 enter/leave 过渡中切换的类名,v- 是这个类名的前缀。使用 能够重新复苏设置前缀,比方 v-enter 替换为 my-transition-enter。

.phone-images {

动态组件

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

<div id="demo">

 

        <ul>

  top: 0;

new Vue({

</div>

 

  animation: 0.5s fade-out;

  </li>

ng-move  class 主要用来当元素被活动时.

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

  padding-top: 0;

 

行使ngClass结合Javascript来落到实处动漫效果

}

@keyframes fade-out {

 

复制代码

  'phonecatServices',

.phone-listing.ng-leave,

// ...

}

  overflow: hidden;

@keyframes fade-in {

上一篇:DOM中的事件下结论 下一篇:没有了

Copyright © 2015-2019 http://www.carrefourstation.com. 澳门新莆京手机网站-新蒲京娱乐场有限公司 版权所有