过渡动画transition在vue的使用

transition & vue

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果
在vue里，可给任何元素和组件添加进入/离开过渡

举个栗子：
html:

<template>
  <div class="root-container">
    <div id="databinding">
      <el-button :type="show?'warning':'success'" @click="show = !show">点我看效果</el-button>
      <transition name="fade">
        <p class="p_style" v-show="show">动画实例</p>
      </transition>
    </div>
  </div>
</template>

js:

data() {
    return {
      show: true
    };
  }

css:

.root-container {
  p {
    font-size: 30px;
    color: red;
  }
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
  opacity: 0;
}

仔细查看 vue官网PI，发现以下描述：

当有相同标签名的元素切换时，需要通过 keyattribute 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition>组件中的多个元素设置 key 是一个更好的实践。

修改html：

...
	<transition name="fade" key="fade">
		<p class="p_style" v-show="show">动画实例</p>
	</transition>
...

刷新页面，期待效果出现~