Vue.js-过渡系统

渡系统是Vue.js为DOM动画效果提供的一个特性，

它能在元素从DOM中插入或移除时触发你的CSS过渡（transition）和动画（animation），也就是说在DOM元素发生变化时为其添加特定的class类名，从而产生过渡效果。

除了CSS过渡外，Vue.js的过渡系统也支持javascript的过渡，

通过暴露过渡系统的钩子函数，我们可以在DOM变化的特定时机对其进行属性的操作，产生动画效果。

SS过渡的用法

首先举一个例子来说明CSS过渡系统的使用方式：

var vm = new Vue({

　el : '#app',

　data: {

　　show : false

　}

});

首先在模板中用transition绑定一个DOM元素，并且使用v-if指令使元素先处于未被编译状态。然后在控制台内手动调用vm.show = true, 就可以看到DOM元素最后输出为：

我们可以看到在DOM元素完成编译后，过渡系统自动给元素添加了一个my-startup-transition的class类名。

CSS过渡钩子函数

Vue.js提供了在插入或DOM元素时类名变化的钩子函数，可以通过Vue.transition('name', {})的方式来执行具体的函数操作。

显示声明过渡类型

Vue.js可以指定过渡元素监听的结束事件的类型，例如：

Vue.transition('done-type', {

　type: 'animation'

})

此时Vue.js就只监听元素的animationend事件，避免元素上还存在transition时导致的结束事件触发不一致。

自定义过渡类名

除了使用默认的类名*-enter, *-leave外，Vue.js也允许我们自定义过渡类名，例如：

Vue.transition('my-startup', {

　enterClass: 'fadeIn',

　leaveClass: 'fadeOut'

})

我们可以通过上述钩子函数的例子，观测元素的类名变化：

Vue.js官方推荐了一个CSS动画库，animate.css，配合自定义过渡类名使用，

可以达到非常不错的效果。

【B站推荐】Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程包含4套优质VUE练手项目，从零开始入门到精通，一套搞定。_哔哩哔哩_bilibili

章节我们主要介绍 Vue.js 的过渡效果与动画效果。包括如何编写自定义 CSS 动画、如何配合第三方 CSS 动画库、过渡钩子函数的使用、如何使用第三方 JavaScript 动画库。本小节的内容相对之前有些难度，同学们在阅读一遍之后如果不能完全掌握，建议反复阅读，并把本小节的所有案例自己实现一遍，相信通过多次的练习一定可以掌握。

1. 过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 1、在 CSS 过渡和动画中自动应用 class； 2、配合使用第三方 CSS 动画库，如 Animate.css； 3、在过渡钩子函数中使用 JavaScript 直接操作 DOM； 4、配合使用第三方 JavaScript 动画库，如 Velocity.js。

语法格式：

使用 transition 组件包裹需要使用过渡效果的 DOM 元素。例如：

    <transition name = "transition-name">
      <div>...</div>
    </transition>

1.1 基本使用

接下来让我们先看一个淡入淡出效果的实现代码：

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity 3s
    }
    .fade-enter, .fade-leave-to {
      opacity: 0
    }
  </style>
</head>
<body>
  <div id = "app">
    <button v-on:click = "show = !show">{{ show ? '隐藏' : '显示'}}</button>
    <transition name="fade">
      <p v-show = "show" >hello !</p>
    </transition>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
        show:true
    },
    methods : {
    }
  });
</script>
</html>

12345678910111213141516171819202122232425262728293031323334353637

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：

HTML 代码第 3-5 行，我们使用 transition 组件包裹 <p> 标签，transition 组件指定 name 为 fade，通过指令 v-show 控制 <p> 标签的显示和隐藏；
HTML 代码第 2 行，定义按钮 button，点击修改 show 的值来控制标签 <p> 的显示隐藏；
CSS 中我们定义了 4 个样式；
JS 代码第 6 行，定义数据 show，默认值为 true。

那么，transition 组件是如何做到这样的过渡效果的呢？

我想，同学们肯定猜想到当元素切换状态的时候，我们定义的样式会作用于标签元素 <p>。那么，到底是不是这样呢？

打开控制台，检索到 <p> 标签上，我们可以清晰地看到：

当元素隐藏的时候，样式 fade-leave-active 和 fade-leave-to 会被添加到元素 <p> 上；
当元素显示的时候，样式 fade-enter-active 和 fade-enter-to 会被添加到元素 <p> 上。

实际上 Vue 在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除；
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡 / 动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数；
v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡 / 动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除；
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡 / 动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数；
v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡 / 动画完成之后移除。

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="test-transition">，那么 v 会替换为 test-transition。例如：test-transition-enter、test-transition-enter-active、test-transition-leave…

1.2 CSS 过渡

在日常开发中，我们经常会使用 CSS 过渡来实现一些简单的动画效果。接下来我们用一个示例来学习如何使用：

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .fade-enter-active {
      transition: all .3s ease;
    }
    .fade-leave-active {
      transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .fade-enter, .fade-leave-to {
      transform: translateY(10px);
      opacity: 0;
    }
  </style>
</head>
<body>
  <div id = "app">
    <button v-on:click = "show = !show">{{ show ? '显示' : '隐藏'}}</button>
    <transition name = "fade">
      <p v-show = "show" >Hello ！</p>
    </transition>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      show:true
    }
  });
</script>
</html>

"运行案例" 可查看在线运行效果

代码解释：

HTML 代码第 3-5 行，我们使用 transition 组件包裹 <p> 标签，transition 组件指定 name 为 fade，通过指令 v-show 控制 <p> 标签的显示和隐藏；
HTML 代码第 2 行，定义按钮 button，点击修改 show 的值来控制标签 <p> 的显示隐藏；
CSS 中我们定义了 4 个样式，通过 transform 控制元素的垂直位移，通过 opacity 控制元素的透明度，通过 transition 控制元素的过渡效果；
JS 代码第 6 行，定义数据 show，默认值为 true。

1.3 CSS 动画

同样，我们可以使用 CSS 动画来实现元素的过渡效果。CSS 动画用法类似 CSS 过渡，在过渡的不同阶段对应的 Class 会作用于元素。但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。相信同学们在日常业务开发中一定使用过 Dialog，接下来我们就使用 CSS 动画来实现它的过渡效果：

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #app{
      text-align: center;
    }
    .dialog{
      width: 100px;
      height: 100px;
      border: 1px solid #333;
      margin: 60px auto;
      text-align: center;
      line-height: 100px;
    }
    .bounce-enter-active {
      animation: bounce-in 400ms;
    }
    .bounce-leave-active {
      animation: bounce-out 300ms;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0.7);
      }
      50% {
        transform: scale(1.3);
      }
      100% {
        transform: scale(1);
      }
    }
    @keyframes bounce-out {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(0.4);
      }
    }
  </style>
</head>
<body>
  <div id = "app">
    <button v-on:click = "show = !show">{{ show ? '显示 Dialog' : '隐藏 Dialog'}}</button>
    <transition name = "bounce">
      <p v-show = "show" class="dialog">Dialog...</p>
    </transition>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      show:false
    }
  });
</script>
</html>

"运行案例" 可查看在线运行效果

代码解释：

HTML 代码第 3-5 行，我们使用 transition 组件包裹 <p> 标签，transition 组件指定 name 为 bounce 指令 v-show 控制 <p> 标签的显示和隐藏；
HTML 代码第 2 行，定义按钮 button，点击修改 show 的值来控制标签 <p> 的显示隐藏；
CSS 中我们定义了样式两个样式：元素入场样式： bounce-enter-active，它执行动画 bounce-in。元素出场样式： bounce-leave-active，它执行动画 bounce-out。
JS 代码第 6 行，定义数据 show，初始值为 true。

1.4 自定义过渡的类名

在之前的两个案例中，我们通过给 transition 设置 name 属性来指定元素在不同阶段的样式类名，但有时候希望使用自定义的过渡类名，我们可以通过给 transition 设置以下属性来达到需求：

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class

自定义过渡的类名优先级高于普通的类名，这样就能很好地与第三方（如：animate.css）的动画库结合使用。

1.5 显性的过渡持续时间

在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定 —— 比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

在这种情况下你可以用组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

<transition :duration="1000">...</transition>

你也可以定制进入和移出的持续时间：

<transition :duration="{ enter: 400, leave: 600 }">...</transition>

2. JavaScript 钩子

transition 组件在过渡的不同阶段会触发相应的钩子函数：

<transition 
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <p>...</p>
</transition>

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

接下来我们来看一个使用钩子函数和 Velocity.js 实现过渡动画的例子：

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .hello{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      margin: auto;
    }
  </style>
</head>
<body>
  <div id = "app">
    <button @click="show = !show">
      切换显示状态
    </button>
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <p v-if="show">
        Demo
      </p>
    </transition>
  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      show:false
    },
    methods: {
      beforeEnter: function (el) {
        el.style.opacity = 0
        el.style.transformOrigin = 'left'
      },
      enter: function (el, done) {
        Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
        Velocity(el, { fontSize: '1em' }, { complete: done})
      },
      leave: function (el, done) {
        Velocity(el, { translateX: '20px', rotateZ: '45deg' }, { duration: 600 })
        Velocity(el, { rotateZ: '90deg' }, { loop: 3 })
        Velocity(el, {
          rotateZ: '45deg',
          translateY: '30px',
          translateX: '30px',
          opacity: 0
        }, { complete: done })
      }
    }
  });
</script>
</html>

"运行案例" 可查看在线运行效果

代码解释：

HTML 代码第 3-12 行，我们使用 transition 组件包裹 <p> 标签，并给 transition 组件绑定监听事件 before-enter、enter、leave；
HTML 代码第 2 行，定义按钮 button，点击修改 show 的值来控制标签 <p> 的显示隐藏；
JS 代码第 7 行，定义数据 show，默认值为 false；
JS 代码第 10-13 行，定义元素的 beforeEnter 函数，并修改元素的样式 style；
JS 代码第 14-17 行，定义元素的 enter 函数，并执行以下操作：
使用 Velocity 修改元素的 opacity 和 fontSize，过渡时间为 300。
使用 Velocity 修改元素的 fontSize，并在完成时间调用 done 回调函数。
JS 代码第 18-27 行，定义元素的 leave 函数，并执行以下操作：
使用 Velocity 修改元素的 translateX 和 rotateZ，过渡时间为 600。
使用 Velocity 修改元素的 rotateZ，并且循环 3 次。
使用 Velocity 修改元素的 rotateZ 、translateY、translateX、opacity，并在完成时间调用 done 回调函数。

3. 初始渲染的过渡

有时候我们希望给元素设置初始渲染的过渡效果，可以通过给 transition 设置 appear 的 attribute：

<transition appear>
  <!-- ... -->
</transition>

这里默认和进入 / 离开过渡一样，同样也可以自定义 CSS 类名：

<transition
  appear
  appear-class="v-appear-class"
  appear-to-class="v-appear-to-class"
  appear-active-class="v-appear-active-class"
>
  <!-- ... -->
</transition>

同样地，可以使用自定义 JavaScript 钩子：

<transition
  appear
  v-on:before-appear="beforeAppear"
  v-on:appear="appear"
  v-on:after-appear="afterAppear"
  v-on:appear-cancelled="appearCancelled"
>
  <!-- ... -->
</transition>

接下来我们看一个完整的示例：

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .hello{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      margin: auto;
    }
    .v-appear-class{
      opacity: 0;
    }
    .v-appear-to-class{
      opacity: 1;
    }
    .v-appear-active-class{
      transition: all 2s;
    }

  </style>
</head>
<body>
  <div id = "app">
    <button v-on:click = "show = !show">隐藏</button>
    <transition 
      appear
      appear-class="v-appear-class"
      appear-to-class="v-appear-to-class"
      appear-active-class="v-appear-active-class"
      v-on:before-appear="beforeAppear"
      v-on:appear="appear"
      v-on:after-appear="afterAppear"
      v-on:appear-cancelled="appearCancelled"
    >
      <p v-show = "show" class="hello">Hello ！</p>
    </transition>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      show:true
    },
    methods: {
      beforeAppear() {
        console.log('beforeAppear')
      },
      appear() {
        console.log('appear')
      },
      afterAppear() {
        console.log('afterAppear')
      },
      appearCancelled() {
        console.log('appearCancelled')
      },
    }
  });
</script>
</html>

"运行案例" 可查看在线运行效果

代码解释：

HTML 代码第 3-14 行，我们使用 transition 组件包裹 <p> 标签，指定 transition 为初次渲染的过渡，并给 transition 组件绑定监听事件: before-appear、appear、after-appear、appear-cancelled；
HTML 代码第 2 行，定义按钮 button，点击修改 show 的值来控制标签 <p> 的显示隐藏；
JS 代码第 6 行，定义数据 show，默认值为 false。

4. 小结

本小节我们介绍了如何使用 transition 实现过渡和动画效果，主要包括以下知识点：

使用 CSS 过渡配合 transition 实现过渡效果；
使用 CSS 动画配合 transition 实现动画效果；
使用 transition 钩子函数操作元素 DOM 来实现动画；
使用 transition 的 appear 属性实现初次渲染的动画效果。

形

transform：可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。

示例：

transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
/*矩阵变形*/
matrix(<number>,<number>,<number>,<number>,<number>,<number>);
/*透视*/
perspective(length);

transition：过度属性

transition：过度效果的css属性名过度效果时长速度效果的速度曲线过度效果开始时间；

transition: property duration timing-function delay;/*示例*/transition:1s ease all;-webkit-tansition:1s ease all;-moz-transition:1s ease all;-o-transition:1s ease all;

rotate()：二维空间旋转元素。

若元素设置了perspective值，可用rotate3d()实现三维空间内旋转。

rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/

scale()

scaleX(<number>)/*只在X轴（水平方向）缩放元素*/scaleY(<number>)/*只在Y轴（垂直方向）缩放*/scaleZ(<number>)/*只在Z轴缩放，前提：元素设定透视值*/

translate([,])：移动,是位移量。

translateX(<translation-value>);/*只在X轴（水平方向）移动*/translateY(<translation-value>);/*只在Y轴（垂直方向）移动*/translateZ(<translation-value>);/*只在Z轴移动，前提：元素设置透视值*/

skew()：倾斜

skewX(<angle>);/*只在X轴（水平）倾斜*/skewY(<angle>);/*只在Y轴（垂直）倾斜*/

matrix(a,c,e,b,d,f)：矩阵变形，c、e的值用正弦或余弦值表示。

a：表示scaleX(); X轴缩放

c：skewY(); Y轴倾斜

e：skewX(); X轴倾斜

b：scaleY(); Y轴缩放

d：translateX() X轴移动

f：translateY() Y轴移动

transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);

perspective()：透视

.wrap{ perspective:1000px; 
}.wrap .child{ transform:perspective(1000px);
}

过渡

transition-property：过度的属性

transition-property:all;/*针对所有元素都有过度效果*/transition-property:none;/*没有元素有过度效果*/transition-property:ident;/*指定css属性有过度效果，例如width*/

transition-duration：过度时间

transition-delay：延迟时间，为负数时，过度动作会从该时间点开始显示，之前的动作会被截断。

transition-timing-function：过度效果，默认ease。

transition-timing-function:ease;/*缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔*/transition-timing-function:linear;/*线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/transition-timing-function:ease-in;/*渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数*/transition-timing-function:ease-out;/*渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数*/transition-timing-function:ease-in-out;/*渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数*/transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/

动画

animation-name：动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义，如果提供多个属性值用逗号隔开。

@keyframes相当于一个命名空间，后面跟一个名词，如果在class中的animation-name定义了与之对应的name就可以执行动画。定义动画时可直接使用关键字from和to，从一种状态过度到另一种状态。

.animation_name{ left:0; top:100px; position: absolute; -webkit-animation: 0.5s 0.5s ease infinite alternate; -moz-animation: 0.5s 0.5s ease infinite alternate; -webkit-animation-name:demo; -moz-animation-name:demo;
}
@-webkit-keyframes demo{ from{left:0;} to{left:400px;}
}
@-webkit-keyframes demo1{
 0%{left:0;}
 50%{left:200px;}
 100%{left:400px;}
}

animation-duration：动画时间

animation-timing-function：播放方式，取值如下：

ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。

linear：线性效果

ease-in：渐显效果

ease-out：渐隐效果

ease-in-out：渐显渐隐效果

step-start：马上跳转到动画结束状态

step-end：保持动画开始状态，到动画执行时间结束，马上跳转到动画结束状态

step([,[start | end]]?)：第一个参数number为指定的间隔数，即把动画分为n步阶段性显示，第二个参数默认为end，设置最后一步状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，以animation-fill-mode的设置为动画结束状态。

cubic-bezier(,,,)：特殊的立方赛贝尔曲线效果

animation-delay：开始播放时间

animation-iteration-count：播放次数，取值为infinite时表示无限循环播放

animation-direction：播放方向，取值为：

normal：正常方向

reverse：动画反向运行，方向始终与normal相仿

alternate：动画会循环正反交替运动

animation-fill-mode：播放后的状态，取值：

none：默认值，不设置

forwards：结束后保持动画结束的状态

backwards：结束后返回动画开始时状态

both：结束后可遵循forwards和backwards两个规则

animation-play-state：检索或设置对象动画的状态，取值：

running：默认，运动

paused：暂停

关联属性

transform-origin：变形原点，transform的参照点，默认为元素的中心点。有两个参数，参数一为横坐标，参数二为纵坐标。

percentage：用百分比指定坐标值，可负

length：用长度指定坐标值，可负

left center right：水平方向取值

top center bottom：垂直方向取值

perspective-prigin：透视原点，定义在X轴和Y轴的3D元素，允许改变3D元素的底部位置，定义该属性时，它是一个元素的子元素，透视图，而不是元素本身。

注意：使用该属性必须和perspective属性一起用，只影响3D转换的元素。

取值：percentage、length、left、center、right、top、center、bottom

backface-visibility：隐藏内容的背面，默认情况下背面可见，反转后变换的内容仍然可见，当backface-visibility设置hidden时，旋转后内容将隐藏，旋转后正面将不再可见。

取值：visible、hidden

transform-style：3D呈现，设置内嵌的元素在3D空间如何呈现，有两个值：

flat：所有子元素在2D平面呈现

preserve-3d：保留3D空间

在线咨询

上一篇：HTML网页中的图形是如何对齐的？有什么方法可以使它们对齐？
下一篇：<AppML> 案例研究-HTML 模板

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Vue.js-过渡系统

1. 过渡

语法格式：

1.1 基本使用

1.2 CSS 过渡

1.3 CSS 动画

1.4 自定义过渡的类名

1.5 显性的过渡持续时间

2. JavaScript 钩子

3. 初始渲染的过渡

4. 小结

形

过渡

动画

关联属性

您的项目需求