为了网站的美观性，给网站部分元素加入CSS3动画，然后在用户根据情景切换显示内容时让网站变得活泼。
<template>
<img v-if="doshow" src="https://file.iviewui.com/dist/7dcf5af41fac2e4728549fa7e73d61c5.svg" class="ani" alt="pic1" />
<img v-else src="https://file.iviewui.com/dist/d6fcbeecd3f5ff1b1dd0a0f68bdf6ce7.svg" class="ani" alt="pic2" />
<Switch size="large" v-model="doshow">
<span slot="open">第一</span>
<span slot="close">第二</span>
</Switch>
</template>
<style>
@keyframes layui-scale{
0%{
opacity: .3;
transform: scale(.5);
}
100%{
opacity: 1;
transform: scale(1);
}
}
.ani{
animation-name: layui-scale;
animation-duration: .3s;
animation-fill-mode: both;
width:300px;
height:300px;
background-color:#ddd;
}
</style>
<script>
export default {
data () {
return {
doshow:true
}
}
}
</script> 比如上面这个例子，图片设置了入场从小变大的动画，希望在切换时也触发动画。但实际除了页面加载的，切换时动画并没有生效。
在vue的官方文档https://cn.vuejs.org/v2/guide/conditional.html中写到了用key管理可复用元素。“Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。”原因就是img标签被复用了，并不是想象中的移除图1的img标签再添加图2的img标签，切换时只是更改了src的值。
img标签没有移除再添加，因此CSS3动画没有执行。所以按vue官方文档说的那样，对元素添加key来表达“这两个元素是完全独立的，不要复用它们”。当然了使用v-show的话是没有这样的问题，因为v-show是一开始就添加了标签，只是隐藏了，那是两个不同的标签。我也测试过，表单元素如果绑定不同的v-model，是会被认为是两个独立的元素。按照文档说的加上在img标签上分别加上key="1"、key="2"的属性，代码的改变不多，我就不再贴代码了。添加后就达到想要的效果。
