059_末晨曦Vue技术_过渡 & 动画之CSS过渡

CSS过渡

点击打开视频讲解更加详细

常用的过渡都是使用 CSS 过渡。

完整例子：

<template>
  <div id="app">
    <div id="example-1">
      <button @click="show = !show">
        Toggle render
      </button>
      <transition name="slide-fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      show: true
    } 
  },
  mounted() {
    
  },
  components:{
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>

若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！！！