Vue 不定高展开动效原理详解

目录
  • 使用场景
  • 背景
  • 实现
  • transition 组件
  • 过渡效果原理
  • 解决

使用场景

在大多数 APP 中,都有问答模块,类似于下面这种(bilibili 为例):

问答模块的静态页面开发并不复杂,也没有特殊的交互。唯一有一点难度应该是回答部分的展开特效。

  • 展开时,需要从上往下将回答部分的 div 慢慢撑开,上面的箭头也要有旋转的特效。
  • 收回时,需要从下往上将回答部分的 div 慢慢缩小,上面的箭头也要有旋转的特效。

对于一般的展开、隐藏特效,只需要在对应元素的 height 上面增加过渡效果即可。但问题是: 不知道对应的 div 的高度,其高度是内部的元素自动撑开的,此时直接在 height 属性上面添加过渡效果会失效(后面会说明原因)。

对于箭头的旋转,则只需要在箭头元素的 transform 上面增加过渡效果,然后让其旋转 180 度(rotateZ(180deg))即可,这个比较好实现。

背景

今天做需求时,正好需要做这种特效。也就是上面的第一张图。先介绍一下列表的数据结构和其 DOM 结构。

列表数据结构如下:

// Item 表示问答的每一项
interface Item {
  Q: string;  // 问题
  A: string;  // 回答
  show: boolean;  // 是否展示
}

// List 表示问答列表
type List = Item[];

项目中并未使用 TypeScript,这里用 interface 是为了方便理解。

DOM 结构(Vue 版本)如下:

<div class="qa panel">
  <div class="qa__title">
    常见问题
  </div>
  <div class="list-qa">
    <div
      v-for="(item, ind) in qaList"
      :key="ind"
      class="list-qa__item"
    >
      <div class="list-qa__question">
        <span>{{ item.Q }}</span>
        <span class="list-qa__question__arrow" />
      </div>
      <span class="list-qa__answer">
        {{ item.A }}
      </span>
    </div>
  </div>
</div>

上面的结构简化了一些交互逻辑和展示逻辑,默认问答列表的每一项都会展示。最外层包裹了一层 div,上面是标题,下面是问答列表,问答列表的每一项包括问题、箭头 icon 和答案。

实现

因为项目使用的框架是 Vue,所以以 Vue 为例,来分析一下如何实现它,以及其实现的原理。

回答是否展示,可以用一个变量控制,这里是 item 的 show 属性。使用 v-show 实现,因为用户可能会多次点击箭头,导致回答频繁地展示或隐藏。

<div
  v-for="(item, ind) in list"
  :key="ind"
  class="list-item"
>
  <!-- 。。。省略不相关元素。。。 -->
  <span
    v-show="item.show"
    class="list-answer"
  >
    {{ item.A }}
  </span>
</div>

transition 组件

在 Vue 中,可以使用 transition 组件来为元素添加动态效果。transition 组件让我们可以为使用条件渲染(v-if、v-show)的元素添加进入、离开时的过渡效果。

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

这样在 name 为 fade 的 transition 组件包裹的 p 标签展示和隐藏时,会有一个 0.5s 的淡入淡出效果。

过渡效果原理

在展示时,p 标签的 opacity(透明度)会从 0(.fade-enter 类选择器中设定的值)开始增加,经过 0.5s 之后,增加至 opacity: 1(元素默认的透明度 opacity 为 1)。

在隐藏时,p 标签的 opacity(透明度)会从 1 开始减少,经过 0.5s 之后,减少至 opacity: 0.fade-leave-to 类选择器中设定的值)。

这样就实现了淡入淡出效果。

同样的,如果我们想让一个元素展示时高度从 0 开始增加,经过某一个时间,达到具体的值;隐藏时高度从该具体值开始减少,经过某一个时间,达到 0。这样就能实现我们前面需要的效果。

我们可以用 css transition 为某一个元素设置过渡效果,过渡效果作用在这个元素的某个属性上、过渡效果的时长等。

.box {
  transition: height 1s;
}

上面代表为 class 为 box 的元素设置了过渡效果,作用在它的 height 属性上面,过渡效果的时长为 1s。当该元素的高度从某一个值变化到另一个值时,就会有一个长为 1s 的过渡效果。

过渡效果的本质是: 当作用的属性的值变化时,并不会立即从一个值变为另一个值,而是在变化的过程中,将中间状态呈现出来。

例如:设置了过渡效果的元素的高度(height)从 0 变化到 100px 时,并不是直接从 0 变化到 100px 的,其变化过程是一个连续的状态,从 0 到 1px,从 1px 到 2px······直到 100px。把中间的高度展现出来,就可以让用户看到过渡效果。

再例如:设置了过渡效果的元素的透明度(opacity)从 0 变化到 1 时,并不是直接从 0 变化到 1 的,其变化过程也是一个连续的状态,从 0 到 0.1,从 0.1 到 0.2······直到 opacity 为1。这样用户就可以看到一个元素从透明状态逐渐变得清晰。当然,并不一定就是从 0 变化到 0.1,然后从 0.1 变化到 0.2,这个过程是一个连续的过程,它的值在慢慢增加,增量是多少并不重要。

需要实现过渡效果,就需要一个起始态和一个终止态,浏览器能够从起始态逐步过渡到终止态。也就是从起始态到终止态之间的部分是连续的,是可以计算的,这样浏览器才能把中间的状态给我们呈现出来。

再回到之前的问题:不知道 div 的高度,其高度是内部的元素自动撑开的,此时直接在 height 属性上面添加过渡效果会失效。

为什么会失效?为什么会失效?为什么会失效?

对于一个 div,如果它的高度是由子元素撑开的,那么它的 css 样式 height 属性的值为 auto。从 0 变到 auto,或者从 auto 变到 0,其中间状态都是不可计算的,浏览器没发给我们展示出中间状态,所以我们看不到过渡效果。

既然从 0 变到 auto,或者从 auto 变到 0,中间状态无法计算,那我们可以显式地告诉浏览器一个数值,应该从 0 变到多少,或者从多少变到 0,让浏览器可以计算出中间状态,这样不就能看到过渡效果了吗?

解决

当展开时,起始态为 0,我们通过 getComputedStyle(element).height 得到元素的具体高度 x(终止态)。给元素设置 transition 属性,然后将元素的高度从 0 变到 x,这样就能实现展开的动效了。

<transition
  name="slide"
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
 >
  <span
    v-show="item.show"
    class="list-answer"
  >{{ item.A }}</span>
</transition>
beforeLeave(el) {
  // 给元素设置过渡效果
  el.style.transition = '0.3s height ease-in-out';
  // 高度变化时,让其内容隐藏
  el.style.overflow = 'hidden';
},
leave(el) {
  el.style.height = 'auto';
  // 设置高度为具体的值
  el.style.height = window.getComputedStyle(el).height;
  // 强制浏览器回流,否则浏览器会合并两次元素的高度更改(回流重绘的知识)
  el.offsetHeight;
  el.style.height = '0px';
},
afterLeave(el) {
  // el.style.height = null;
  // 收尾工作,展示完过渡效果之后,设为原来的值
  el.style.transition = '';
  el.style.overflow = 'visible';
},

这里需要给元素设置 overflow: hidden,在元素高度小于内部内容的高度时,才会隐藏内容。

同样地,隐藏时先通过 getComputedStyle(element).height 得到元素的具体高度 x(起始态),给元素设置 transition 属性,然后将元素的高度从 x 变到 0,这样就能实现隐藏的动效了。

beforeEnter(el) {
  // 给元素设置过渡效果
  el.style.transition = '0.3s height ease-in-out';
  // 高度变化时,让其内容隐藏
  el.style.overflow = 'hidden';
},
enter(el) {
  el.style.height = 'auto';
  // 保存元素原来的高度
  const endWidth = window.getComputedStyle(el).height;
  el.style.height = '0px';
  // 强制浏览器回流,否则浏览器会合并两次元素的高度更改(回流重绘的知识)
  el.offsetHeight;
  el.style.height = endWidth;
},
afterEnter(el) {
  // el.style.height = null;
  // 收尾工作,展示完过渡效果之后,设为原来的值
  el.style.transition = '';
  el.style.overflow = 'visible';
},

箭头的旋转动效就比较简单了。先设置过渡效果,然后只需要在点击箭头的时候,动态为这个元素添加一个类名,让其旋转属性生效(rotateZ(180deg));当再一次点击的时候,去掉这个类名就好了。

<span
  class="list-question__arrow"
  :class="{'list-question__rotate-arrow': !item.show}"
  @click="onClickPromblem(ind)"
/>
onClickPromblem(index) {
  const qaItem = this.qaList[index];
  this.$set(qaItem, 'show', !qaItem.show);
},
list-question__arrow {
  width: 12px;
  height: 12px;
  background: url(https://xxx.com/arrowup.png) center no-repeat;
  transition: transform .4s;
}
list-question__rotate-arrow {
  transform: rotateZ(180deg);
  transition: transform .4s;
}

到此这篇关于Vue 不定高展开动效原理详解的文章就介绍到这了,更多相关Vue 不定高展开 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件

    需求分析: 如图,有很多高度不固定的模块(图中只显示两个,本人项目有十三个),点击模块标题展开相应的模块,再次点击此模块匿藏,如何实现此需求并实现复用? 点击红框前: 点击后: 难点分析: 模块高度不固定.比如,本人一开始想到的方法如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title

  • Vue 不定高展开动效原理详解

    目录 使用场景 背景 实现 transition 组件 过渡效果原理 解决 使用场景 在大多数 APP 中,都有问答模块,类似于下面这种(bilibili 为例): 问答模块的静态页面开发并不复杂,也没有特殊的交互.唯一有一点难度应该是回答部分的展开特效. 展开时,需要从上往下将回答部分的 div 慢慢撑开,上面的箭头也要有旋转的特效. 收回时,需要从下往上将回答部分的 div 慢慢缩小,上面的箭头也要有旋转的特效. 对于一般的展开.隐藏特效,只需要在对应元素的 height 上面增加过渡效果即

  • Vue transx组件切换动画库示例详解

    目录 来个介绍 安装 使用 支持参数 支持事件 支持API 支持的动画类型 说明 来个介绍 先奉上组件库的名称:transx github地址:github.com/tnfe/transx npm参考: www.npmjs.com/package/tra… 示例地址:codesanbox 安装 npm install transx or yarn add transx 使用 <!-- 包裹动画元素 --> <trans-x :time="time" :delay=&q

  • echart实现大屏动效示例详解

    目录 1.通过dataZoom实现柱状图动态前移效果 2.叠加流光效果 3.柱状图光亮轮播 1.通过dataZoom实现柱状图动态前移效果 最近做大屏相关需求,产品说需要炫酷一点的效果,于是做了一些echart相关的动效 设置dataZoom当前缩放值,加定时器,实现轮播效果. 示例: option = { color: ['#1E90FF', '#FFA500'], tooltip: { trigger: 'axis', axisPointer: {} }, grid: { left: 20,

  • keepalived对nginx进行高可用搭建及原理详解

    目录 一.Keepalived介绍 二.Keepalived的应用场景 三.Keepalived的工作原理 1 VRRP协议 2 核心组件 3 分层工作 4 工作状态 四.Keepalived使用 1 配置介绍 2 使用keepalived对nginx进行高可用搭建 2.1 环境准备 2.2 nginx软件安装和配置 2.3 Keepalived软件安装 2.4 监听存活脚本 2.5 最终配置文件 2.6 启动主从的Keepalived 2.7 查看VIP是否启动 2.8 测试 五.需要注意的问

  • Vue中slot插槽作用与原理详解

    目录 1.作用 2.插槽内心 2.1.默认插槽 2.2.具名插槽(命名插槽) 2.3.作用域插槽 实现原理 1.作用 父组件向子组件传递内容 扩展.复用.定制组件 2.插槽内心 2.1.默认插槽 把父组件中的数组,显示在子组件中,子组件通过一个slot插槽标签显示父组件中的数据. 子组件 <template> <div class="slotChild"> <h4>{{msg}}</h4> <slot>这是子组件插槽默认的值&

  • Vue动态组件和异步组件原理详解

    前言 在vue官方资料中,我们可以可以很学会如何通过vue构建"动态组件"以及"异步组件",然而,在官方资料中,并没有涉及到真正的"动态异步"组件,经过大量的时间研究和技术分析,我们给出目前比较合理的技术实现方式,并分析一下vue动态异步组件的原理 动态组件 & 异步组件的存在,使得我们更方便地控制首屏代码的体积,加快加载速度. 抛开具体细节不谈,一个普通 Vue 组件从创建到展现在页面里,主要经历了以下流程: // 组件 Object

  • 关于Vue源码vm.$watch()内部原理详解

    关于vm.$watch()详细用法可以见官网. 大致用法如下: <script> const app = new Vue({ el: "#app", data: { a: { b: { c: 'c' } } }, mounted () { this.$watch(function () { return this.a.b.c }, this.handle, { deep: true, immediate: true // 默认会初始化执行一次handle }) }, met

  • Vue中key的作用及原理详解

    目录 1. 先说结论 2. key的作用 2.1 举一个例子 2.2 修改一下上述示例 2.3 再修改一下示例 3. key的实现原理 1. key为index的情况. 2. key为id的情况. 总结 1. 先说结论 key在Vue是DOM对象的标识: 进行列表展示时,默认key是index: 如果数据只做展示使用,使用index作为key是没有任何问题的: 如果使用index作为key,而后续操作会破坏顺序,一定会带来效率问题,严重时会渲染出错误的DOM 关于key的作用及实现原理,下面一一

  • Vue之监听数据的原理详解

    <body> <div id="root"> <h1>学生的基本信息</h1> <button @click="student.age++">年龄+1岁</button> <button @click="addSex">添加性别属性默认值是男</button><br> <button @click="student.sex=

  • Vue实现路由过渡动效的4种方法

    Vue 路由过渡是对 Vue 程序一种快速简便的增加个性化效果的的方法. 可以让你在程序的不同页面之间增加平滑的动画和过渡.如果使用得当,可以使你的程序显得更加专业,从而增强用户体验. 本文中会先介绍使用 Vue 路由过渡的基础知识,然后在举几个例子,为你一些灵感.下面是其中的一个案例: 在 Vue 程序中添加路由 一般 Vue 路由设置如下所示: <template> <router-view /> </template> 在旧版本的 Vue 路由中,我们可以简单地用

随机推荐