———————————-(VUE肆2)————————————-

animate、动画钩子函数、列表动画=>day8_9~10

一、自定义过渡动画

1.1)代码示例
  1. /* 可以设置不同的进入和离开动画 */
  2. /* 设置持续时间和动画函数 */
  3. .hongjilin-enter-active {
  4.   transition: all .3s ease;
  5. }
  6. .hongjilin-leave-active {
  7.   transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  8. }
  9. //离场动画
  10. .hongjilin-enter, .hongjilin-leave-to
  11. /* .hongjilin-leave-active for below version 2.1.8 */ {
  12.   transform: translateX(10px);
  13.   opacity: 0;
  14. }
  1. <div id="example-1">
  2.   <button @click="show = !show">
  3.     Toggle render
  4.   </button>
  5.   <!--取别名类名-->
  6.   <transition name="hongjilin">
  7.     <p v-if="show">hello</p>
  8.   </transition>
  9. </div>
  10. new Vue({
  11.   el: '#example-1',
  12.   data: {
  13.     show: true
  14.   }
  15. })

二、animate动画库的使用

2.1)导入animate.css文件
  1. <link rel="stylesheet" href="animate.css">

2.2)animate动画使用

1.enter-active-class=”指定进入的时候绑定的动画类名”
2.leave-active-class=”指定离开的时候绑定的动画类名”
注意:如果元素默认就是显示的,那么第一次不会触发动画,如果想第一次就触发动画.可以再添加一个appear属性

  1. <transition enter-active-class="animated fadeInRight "
  2. leave-active-class=" animated  fadeOutRight"
  3.             appear>
  4.     <h1 v-show="flag1">动起来！</h1>
  5. </transition>

2.3)animate官网

https://animate.style/

(2.4)mode in-out先进后出 out-in先出后进
  1.    <transition appear mode='out-in'>
  2.             <!-- :is后面跟的是变量,通过变量来指定组件 -->
  3.             <component :is="jilin"></component>
  4.           </transition>

三.钩子动画函数

3.1)代码解析：
  1.    <div>
  2.    <button type="button" @click="flag=!flag">快跑</button>
  3.       <!-- 定义js的钩子函数 -->
  4. <transition
  5.     @before-enter="beforeEnter"
  6.     @enter="enter"
  7.     @after-enter="afterEnter"
  8. >
  9.  <div v-show="show" style="width:100px;height:100px;border-radius: 50px;background-color: red;"></div>
  10. </transition>
  11.         </div>
  1. let vm = new Vue({
  2.     el: "#app",
  3.     data: {
  4.         flag: false,
  5.     },
  6.     methods: {
  7.         // el 表示要执行动画的那个DOM元素, 是原生的 js DOM 对象
  8.         beforeEnter(el) {
  9.             // 设置动画开始之前的初始位置
  10.             el.style.transform = "translate(0, 0)"
  11.         },
  12.         enter(el, done) {
  13.             // 刷新动画效果
  14.             el.offsetWidth;
  15.             // 动画完成后的样式
  16.             el.style.transform = "translate(550px, 350px)";
  17.             // 动画的持续时间
  18.             el.style.transition = "all 3s ease";
  19.             // done 其实是 afterEnter() 的引用
  20.             done();
  21.         },
  22.         afterEnter(el) {
  23.             // 动画完成之后调用
  24.             this.flag = !this.flag
  25.         }
  26.     }
  27. })

四.列表动画

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. </html>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>Document</title>
  9. <script src="./lib/vue-2.4.0.js"></script>
  11. <style>
  12.   /* 列表项样式 */
  13.   li{
  14.     border: 1px dashed #999;
  15.     margin:5px;
  16.     line-height: 35px;
  17.     padding-left: 5px;
  18.     font-size: 12px;
  19.     width:100%;
  20.   }
  21.   /* 鼠标列表项悬停效果 */
  22.   li:hover{
  23.     background-color: grey;
  24.     transition: all 0.8s ease;
  25.   }
  26.   /* transition渐变出入场必写基础项 */
  27.   .v-enter,.v-leave-to{
  28.     opacity: 0;
  29.     transform:translateY(80px);
  30.   }
  31.   .v-enter-active,.v-leave-active{
  32.     transition: all 0.6s ease;
  33.   }
  35.  /* transition 在删除列表项的同时，使剩余未删除项可同步移动对原位置填充*/
  36.   .v-move{
  37.     transition:all 0.6s ease;
  38.   }
  39.   .v-leave-active{
  40.     position: absolute;
  41.   }
  43. </style>
  44. </head>
  46. <body>
  47.   <div id="app">
  48.     <div>
  49.       <label>
  50.         Id: 
  51.         <input type="text" v-model="id">
  52.       </label>
  54.       <label>
  55.         Name: 
  56.         <input type="text" v-model="name">
  57.       </label>
  59.       <input type="button" value="添加" @click="add">
  60.     </div>
  62.     <!-- 列表项必须用transition-group代替transition包围 -->
  63.     <!-- appear属性实现列表项入场式效果，必须写上否则入场没效果 -->
  64.     <!-- tag属性如果不设置，则默认为span -->
  65.     <transition-group appear tag="ul">
  66.       <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
  67.         {{item.id}}---{{item.name}}
  68.       </li>
  69.     </transition-group>
  70.   </div>
  72.   <script>
  73.     var vm=new Vue({
  74.       el:'#app',
  75.       data:{
  76.         id:'',
  77.         name:'',
  78.         //[]不是{}
  79.         list:[
  80.         {id:1,name:'ess'},
  81.           {id:2,name:'red'},
  82.           {id:3,name:'rdne'},
  83.           {id:4,name:'dnje'}
  84.         ]
  85.       },
  86.       methods:{
  87.         add(){
  88.           this.list.push({id:this.id,name:this.name})
  89.           this.id=this.name=''
  90.         },
  91.         del(i){
  92.           this.list.splice(i,1)
  93.         }
  94.       }
  95.     })
  96.   </script>
  97. </body>
  98. </html>