[Vue笔记] transition属性以及应用

1. 什么是transition属性，为什么需要用到他

一个标签的属性变化难免过于生硬，我们想通过放缓这个过程来达到美化的效果，
幸运的是，CSS为我们提供了transition(过渡)属性，只需简单的提供需要变化的属性和动画时间即可

2. Playground

菜鸟教程在线编辑器

3. 个人的一些理解

为状态 A 变换到状态 B 提供过渡时，只需在原来的状态 A 上添加transition属性，
就能得到过渡的效果，当状态恢复时，transition已经默认提供了恢复时的过渡状态，不需要在 B 上再写transition

4. 使用transition构造组件

4.1 switcher

Introduction

ElementUI

设计需求

1. 状态A 开关未开启

   • 白色小球在左侧
   • 槽为灰色

2. 状态B 开关开启后

   • 白色小球在右侧
   • 槽为蓝色
   • 小球的移动要动画实现
3. 再次点击开关，恢复到状态A

说明

1. 开关组件中白色的小球的移动可以用transform: translateX(move)实现
2. transform 属性不会改变布局
3. 状态的改变可以通过绑定类来实现，改变类可以通过点击时间来实现
4. svg的图标是我从iconfot.cn下的

基本骨架

样式