vue2[初级] 过渡和动画效果

本节内容

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-enter-active{
  transition: all 2s;
}

/*离开持续时间5秒 针对所有样式*/
.fade-leave-active{
  transition: all 5s;
}

/*初始全透明，2d移动*/
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform:translate(100px,100px)
}

动画效果

新建组件 Test2.vue

<template>
  <div style="align:center;padding: 100px">
    <button @click="show = !show">Toggle show</button>
    <transition name="bounce">
      <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
    </transition>
  </div>
</template>

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

<style scoped>
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

调整后效果

只是调整了下淡入淡出时间