余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

四个新的 CSS 功能实现流畅的进入和退出动画

xiyangw 2023-10-03 15:54 36 浏览 0 评论

家好,很高兴又见面了,我是"高级前端?进阶?",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。

前言

动画是体验的核心,比如引导用户从一次交互到下一次交互, 但网页的流畅动画还存在一些不足,其中包括设置进入和退出动画的能力,以及为对话框和弹出窗口等可关闭元素平滑往返顶层的动画效果。

为了填补这些空白,Chrome 116 和 117 包含了四个新的 Web 平台功能,可实现离散属性的平滑动画和过渡。这四项新功能包括:

  • 能够在关键帧时间轴上(keyframe timeline)对displaycontent-visibility进行动画处理(从 Chrome 116 开始)。
  • 带有allow-discrete关键字的transition-behavior属性可以启用离散属性的转换,例如:display(来自Chrome 117)。
  • @starting-style 规则用于将入口效果(entry effects)从 display: none 动画化到顶层(从 Chrome 117 开始)。
  • overlay 用于控制动画期间顶层行为(top-layer behavior)的叠加属性(来自 Chrome 117)

1.在keyframes中显示animations

从 Chrome 116 开始,可以在关键帧规则中使用 display 和 content-visibility。然后,它们将在关键帧出现时交换,不需要其他额外配置:

.card {
  animation: fade-out 0.5s forwards;
}

@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

上面的示例在 0.5 秒的时间内将 opacity 设置为 0,然后将 display 设置为 none。 此外,forwards 关键字确保动画保持在其最终状态,以便应用到的元素始终保持 display: none opacity: 0

然而,过渡无法创建非常复杂的动画,例如以下示例:

.card {
  animation: spin-and-delete 1s ease-in forwards;
}

@keyframes spin-and-delete {
  0% {
    transform: rotateY(0);
    filter: hue-rotate(0);
  }
  80% {
    transform: rotateY(360deg);
    filter: hue-rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

spin-and-delete 动画是退出动画。 首先,卡片将在 y 轴上旋转,进行色调旋转,然后在时间线的 80% 处,将其不透明度从 1 转换为 0。最后,卡片从 display: block 切换到 display: none。

对于退出动画,可以为动画设置触发器,而不是将它们直接应用于元素。 例如,通过将事件侦听器附加到触发类来应用动画的按钮,如下所示:

.spin-out {
   animation: spin-and-delete 1s ease-in forwards;
}
document.querySelector('.delete-btn').addEventListener('click', () => {
 document.querySelector('.card').classList.add('spin-out');
})

上面的示例现在的最终状态为 display:none。在很多情况下,需要进一步删除 DOM 节点并设置超时,以便动画首先完成。

2.转换离散动画

与使用关键帧对离散属性进行动画处理不同,要使用过渡离散属性,开发者需要使用 allow-discrete

transition-behavior属性

allow-discrete 模式让离散动画成为可能,可以将其作为 transition-behavior 的值,transition-behavior接受 normal 或者 allow-discrete 两个属性。

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
  opacity: 0;
  display: none;
}

transition 简写也是一样,可以省略该属性并在每个 transition 的末尾使用 allowed-discrete 关键字。

.card {
  transition: opacity 0.5s, display 0.5s allow-discrete;
}
.card.fade-out {
  opacity: 0;
  display: none;
}

如果要对多个离散属性进行动画处理,则需要在要对其进行动画处理的每个属性后面包含allow-discrete。例如:

.card {
  transition: opacity 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

3.入口动画的@starting-style值

到目前为止,本文已经介绍了退出动画,要创建进入动画,需要使用 @starting-style 规则。使用 @starting-style 应用浏览器在页面上打开元素之前可以查找的样式, 这是“before-open”状态。

/*  0. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  1. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

4.动画元素进出顶层

要将元素动画化到顶层或从顶层动画化,请在“打开”状态下指定@starting-style,以告诉浏览器从何处开始动画化。 对于对话框,打开状态由 [open] 属性定义, 对于弹出窗口,请使用 :popover-open 伪类。

一个简单的对话框示例如下所示:

/*   0. BEFORE-OPEN STATE   */
@starting-style {
  dialog[open] {
    translate: 0 100vh;
  }
}

/*   1. IS-OPEN STATE   */
dialog[open] {
  translate: 0 0;
}

/*   2. EXIT STATE   */
dialog {
  transition: translate 0.7s ease-out, overlay 0.7s ease-out allow-discrete, display 0.7s ease-out allow-discrete;
  translate: 0 100vh;
}

在下一个例子中,进入和退出效果是不同的。 通过从视口底部向上动画进入,从视口顶部退出效果。 它还使用嵌套 CSS 编写,以实现更多视觉封装。

对弹出窗口进行动画处理时,请使用 :popover-open 伪类而不是之前使用的 open 属性。

.settings-popover {
  &:popover-open {
    /*  0. BEFORE-OPEN STATE  */
    /*  Initial state for what we're animating *in* from, 
        in this case: goes from lower (y + 20px) to center  */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }
    
    /*  1. IS-OPEN STATE  */
    /*  state when popover is open, BOTH:
        what we're transitioning *in* to 
        and transitioning *out* from */
    transform: translateY(0);
    opacity: 1;
  }
  
  /*  2. EXIT STATE  */
  /*  Initial state for what we're animating *out* to , 
      in this case: goes from center to (y - 50px) higher */
  transform: translateY(-50px);
  opacity: 0;
  
  /*  Enumerate transitioning properties, 
      including display and allow-discrete mode */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

overlay属性

最后,要从顶层淡出弹出框或对话框,请将overlay 属性添加到过渡列表中。 popover 和dialog 将跳过剪辑和变换,并将内容放在顶层。

如果不过渡叠加,元素将立即返回到被剪切、变换和覆盖的状态,并且看不到过渡发生。

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

相反,应在transition 和 animation中包含overlay,以便将叠加层与其余功能一起进行动画处理,并确保在制作动画时其保留在顶层,这看起来会平滑得多。

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

视图转换注意事项

如果要更改 DOM,例如在 DOM 中添加和删除元素,平滑动画的另一个很好的解决方案是视图转换,以下是使用视图转换构建的上述示例中的两个。

在第一个演示中,视图过渡将处理过渡,而不是设置 @starting-style 和其他 CSS 转换。 视图转换设置如下:

首先,在 CSS 中,为每张卡指定一个单独的视图转换名称。

.card-1 {
  view-transition-name: card-1;
}

.card-2 {
  view-transition-name: card-2;
}

/* etc. */

然后,在 JavaScript 中,将 DOM 变化(在本例中为移除卡片)包装在视图转换中。

deleteBtn.addEventListener('click', () => {
  // Check for browser support
  if (document.startViewTransition) {
    document.startViewTransition(() => {
      // DOM mutation
      card.remove();
    });
  } 
  // Alternative if no browser support
  else {
    card.remove();
  }
})

参考资料

https://developer.chrome.com/blog/entry-exit-animations/

https://www.youtube.com/watch?app=desktop&v=lsYlEzuXq-w

相关推荐

前端开发之用以处理表单的jQuery控件之AJAX请求

介绍介绍我们的TFUMS的网页模板基本上都做好了,但是大家都发现了我们的模板里面的表单是不能提交的,这是因为缺少驱动程序,这个驱动程序就是指Javascript代码。在用户填写完表单项之后,点击了提交...

AJAX with JSP使用jQuery示例_ajax和jquery先学哪个

在这里,您将获得使用jQuery的JSP的AJAX示例。AJAX用于从服务器发送和接收数据,而无需重新加载页面。我们可以使用jQuery轻松实现AJAX。它为AJAX功能提供了各种方法。我使用Ecli...

华杉科技-jQuery与AJAX基础入门到实战精通

华杉科技提供的“jQuery与AJAX基础入门到实战精通”课程是一个涵盖了jQuery和AJAX技术的全面学习路径。下面是该课程的一个大致的学习大纲,以帮助你了解你将学到什么。1.jQuery基础入...

jQuery实现Ajax功能分析「与Flask后台交互」

本文实例讲述了jQuery实现Ajax功能。分享给大家供大家参考,具体如下:jQuery是一个小型的JavaScript库,它通常被用来简化DOM和JavaScript操作。通过在服务器...

jQuery - AJAX load() 方法_jqueryajax全部用法

jQueryload()方法jQueryload()方法是简单但强大的AJAX方法。load()方法从服务器加载数据,并把返回的数据放入被选元素中。语法:$(selector).load...

原生异步请求方法ajax,及jQuery相关方法,如何采用ES6封装ajax

知识已经过时了,可以直接跳到文章末尾看ES6封装ajax。怀念曾经的jQuery一.ajax方法jQuery:JavaScript代码包装成拿过来就能实现特定功能的代码库,基本淘汰了;json:简单...

JS类库Jquery(二):优雅的使用JQuery写Ajax实现前后端完美交互

Jquery虽然属于比较老的技术,但是相较于原生的JS写起来还是反方便很多,现在流行使用VUE等开源的框架,但是这并非不妨碍咱们进行Jquery的学习,前端程序员成长的过程中Jquery是必须了解的类...

Python Web详解:(Ajax+JSON+JQuery)

JOSN:JavascriptObjectNotation作用:主要约束前后端交互数据的格式JSON的格式表示单个对象使用{}采用键值对的格式保存数据键必须使用双引号引起来相当于...

JavaScript、Ajax、jQuery全部知识点,1分钟速懂!

本文将详细解读JavaScript、ajax、jQuery是什么?他们可以实现什么?1、JavaScript定义:javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一...

一文读懂Ajax与Axios、jquery之间的关系与区别

1、关系1)Ajax与jQuery:jQuery提供了对Ajax技术的封装,使得使用Ajax变得更加方便。jQuery中的Ajax方法是对原生的Ajax技术(基于XMLHttpRequest对象)进行...

Javascript应用-jQuery Ajax DOM 元素、遍历、数据操作和方法

jQuery库拥有完整的Ajax兼容套件。其中的函数和方法允许在不刷新浏览器的情况下从服务器加载数据,具体如下:函数描述jQuery.ajax()执行异步HTTP(Ajax)请求。.aja...

Jquery中ajax的使用_jquery.ajax

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。Jquery包装的ajax操作如下:$get$post操作...

全新web前端开发教程之Jquery Ajax

1、$.ajaxjquery调用ajax方法:格式:$.ajax({});参数:type:请求方式GET/POSTurl:请求地址urlasync:是否异步,默认是true表示异步data:发送到服务...

jquery对ajax的支持_ajax是什么

...

jquery中的Ajax请求详解各个参数_jquery ajax实例

比较适合初学的人$.ajax({url:"接收数据的页面地址",data:{参数:值,参数:值........},type:'post',或者getdataType:'json',async:t...

取消回复欢迎 发表评论: