vue为v-if添加过渡动画效果

单v-if的过渡动画

当需要为html添加过渡动画的时候，可以在将被过渡的部分写在transition标签中，并为其添加name属性。（如果不添加会默认为v）。

<transition name="plus-icon">
      <div class="icon-plus"
           v-if="flag">
           <img />
      div>
transition>

vue 为过渡动画添加了两对，共六种状态，分别是v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active和v-leave-to。这六个也是相应的样式名。如果transition标签有name属性，则将v进行相应替换。

这里以enter为例，介绍v-enter、v-enter-active、v-enter-to这三种样式，leave状态类似。v-enter是过渡开始时的状态样式，v-enter-to是过渡结束后的样式，v-enter-active描绘整个过渡过程，填写过渡动作。

下面是具体的过渡样式，

  .plus-icon-enter-active{
    transition: opacity .5s;
  }
  .plus-icon-enter{
     opacity: 0;
  }
  .plus-icon-leave-active{
    transition: opacity .5s;
  }
  .plus-icon-leave-to{
    opacity: 0;
  }

因为我们的transition标签的name属性为plus-icon。所以样式名也进行了替换。plus-icon-enter表示过渡开始前的透明度为0，plus-icon-enter-active表示0.5内完成透明度的变化，变化的默认事件曲线为linear。这里没有写过渡结束后的透明度变化，因为v-if为true时的透明度为1。

   .plus-icon-enter-to{
     opacity: 1;
  }

也可以这么写，即过渡结束后，透明度为1，效果也是一样的