本节内容

vue提供的过渡和动画其实就是通过css样式控制渐入渐出及位置便宜的效果

过渡效果

• 1 新建组件Test1.vue

<template>
  <div>
    <button @click="isShow=!isShow">toggle</button>
    <transition name="fade">
      <p v-show="isShow">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Test1',
  data(){
    return{
      isShow:true
    }
  }
}
</script>

<style scoped>
/* 显示和隐藏的过滤效果  opacity属性持续2秒*/
.fade-enter-active, .fade-leave-active {
  transition: opacity 2s;
}
/*隐藏时候的样式*/
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

过渡效果 - 偏移

– 只是更换css样式

/* 偏移效果 */
/*进入持续时间2秒 针对所有样式*/
.fade-en