81Vue - CSS 过渡

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

下面是一个简单例子：

HTML代码：

  
    Toggle render
  
  
    
hello
  

JS代码：

new Vue({
  el: '#example-1',
  data: {
    show: true
  }
})

CSS：

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.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-active {
  padding-left: 10px;
  opacity: 0;
}

效果图：