vue04-动画-动态组件

1.

1. 基本过渡动画
transition的name名要和样式的前缀名一致(fade)
enter---->enter-to —enter-active
leave---->leave-to —leave-active

<transition name="fade">
    <p v-if="show">hello</p>
</transition>

.fade-enter{
  	 opacity: 0;
     width: 0;
     background-color: black;
 }
 .fade-enter-to{
     width: 200px;
     opacity: 1;
     background-color: white;
 }
  .fade-enter-active{
     transition: all 1s linear;
 }

2.关键帧动画

<transition name="fade">
    <p v-if="show">hello</p>
</transition>

@keyframes donghuaming {
  	 0%{
         opacity: 0;
     }
     100%{
         opacity: 1;
     }
}
.fade-leave-active,.fade-enter-active{
   animation: donghuaming 2s linear;
}

3.第三方动画

<transition enter-active-class="animate__animated animate__flash" 
            leave-active-class="animate__animated animate__swing">
     <p v-show="isshow">白日放歌须纵酒,青春作伴好还乡</p>
</transition>

@import "../../node_modules/animate.css/animate.css";

4.多个元素动画
1.相同标签名元素切换，需要设置key属性唯一
2.控制多元素动画先后顺序：transition组件中设置mode（过渡动画模式）
in-out先进入再离开 out-in先离开再进入

<transition		enter-active-class="animate__animated animate__flash"
                leave-active-class="animate__animated animate__swing"
                mode="out-in">
            <p v-if="isShow" id="a" key="1">第一个p</p>
            <p v-else        id="b" key="2">第二个p</p>
</transition>

2.多个组件动画

3.动态组件

<keep-alive :include="/^(Child)/">//keep-alive默认缓存所有组件
// include属性，写哪个组件名，就缓存哪个，不写就不缓存。
值可以是字符串，可以写多个名字，可写正则
exclude，写谁不缓存谁，不写的则缓存
   <component :is="curr"></component>//可以通过组件名切换组件
</keep-alive>