vue.js 过渡

使用CSS过渡

• 首先在你的标签中加入transition="fade"(fade是你自己起的名字，一个过渡效果的样式名）

  
    
  
    show
  

• 写CSS样式

  .fade-transition {
      transition: all 1s ease;
      opacity: 1;
    width: 150px;
    height: 150px;
    background-color: red;
  }
  .fade-enter,.fade-leave {
    opacity: 0;
  }

  .fade-transition 始终保留在元素上。
  .fade-enter 定义进入过渡的开始状态。只应用一帧然后立即删除。
  .fade-leave 定义离开过渡的结束状态。在离开过渡开始时生效，在它结束后删除。

• vue.js代码：

注意：transition是'xxx'，css样式就是xxx-transition,xxx-enter,xxx-leave，名字要对应。

javascript钩子

可以在实现过渡的过程使用JavaScript钩子执行一些东西：
eg：

    

    show

效果：

Paste_Image.png

Paste_Image.png

Paste_Image.png

可以看到在不同时期，执行了对应的JavaScript钩子。