# 一、transition标签结合css
vue.2.0中的过渡动画利用自身的transition组件实现
有四种情形可以实现过渡效果
- 利用
v-if渲染元素时 - 利用
v-show展示或者隐藏元素时应用过渡生效 - 动态组件(把几个组件挂载到一个父节点上，在父节点绑定变量来决定显示哪个子组件)
- 组件根节点
- 过渡有两种总的状态：即
enter(过渡开始)和leave(过渡结束)- 这两中状态再细分，可分出6种状态，对应6个类名
- 在进入/离开的过渡中，会有 6 个
class切换
控制元素的滑入与滑出，例如：
DOM结构，要在transition组件上添加name属性，并在css中使用name的属性值替代以上v-状态种的v作为类名
<transition name="slide">
<div class="food" v-show="showFlag" @click="hide">
<div class="food-content">
<div class="imang-header">
<img :src="food.image" >
</div>
</div>
</div>
</transition>
@前端进阶之旅: 代码已经复制到剪贴板
css样式
.food
position :fixed
left:0
top:0
bottom: 48px
z-index:30
width :100%
background :#fff
/*定义元素最终移动到的位置，以及移动到此位置需要的时间*/
.slide-enter-active
transition: all .5s ease
transform:translate3d(0,0,0)
/*定义元素从什么位置离开，以及离开岛指定位置所需的时间*/
.slide-leave-active
transition: all .5s ease
transform:translate3d(0,0,0)
/*定义元素从100%的位置移入到0，过渡结束后再从0回到100%的位置*/
.slide-enter,.slide-leave-to
transform:translate3d(100%,0,0)
