vue过渡&动画，学习日志

vue在插入、更新、移除dom时提供多种方式的应用过渡效果

• 在 CSS 过渡和动画中自动应用 class
• 可以配合使用第三方 CSS 动画库，如 Animate.css
• 在过渡钩子函数中使用 JavaScript 直接操作 DOM

单元素、组件的过渡

在vue的transition标签中封装要使用过渡动画的组件或元素。
只有组件进入、离开时才可以使用过渡动画。
在条件渲染，条件展示、动态组件、组件根节点中可以给任何元素添加过渡动画

• 练习时的实例

    <button @click="show=!show">测试</button>
    <transition name="fade">
      <div class="box" v-show="show"></div>
    </transition>
    <style>
    <!-- 组件的默认状态 -->
.box{
  width: 100px;
  height: 100px;
  background-color: #ff0;
  opacity: 1;
  transition: opacity 2s linear;
}
<!-- 组件未加载的状态 -->
.fadeout{
  opacity: 0;
}


/* 渐入渐出效果 */
<!-- 组件离开中，组件进入中的状态 -->
/* .fade-leave-active,.fade-enter-active{
  transition: opacity 0.5s;
}
<!-- 组件进入前和组件离开后的状态 -->
.fade-enter,.fade-leave-to{
  opacity: 0;
} */

<!-- 左侧进入右侧离开效果 -->
<!-- 组件进入前的状态 -->
.fade-enter{
  /* transform: translateX(-100px); */
  opacity:0
}
<!-- 组件进入中，和组件离开中的状态。一般用于设定动画和执行时间 -->
.fade-enter-active,.fade-leave-active{
  transition: all 2s ;
}
<!-- 组件离开后状态 -->
.fade-leave-to{
  transform: translateX(100px);
  opacity: 0;
}

组件过渡的类名

以下类名中，'V’可以是任意的transition标签的name名

• v-enter:定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
• v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
• v-enter-to:定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
• v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
• v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
• v-leave-to:定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
  一般来讲，css类名过渡最为常用。

css动画

与css过渡相似，只不过css动画中的v-enter类名不会在插入dom是删除，会在 animationend 事件触发时删除（通俗来讲，就是animation动画结束后删除v-enter类名）

同时使用过渡和动画

在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

 <transition
            type="transition"
            <!-- 动画执行时间 -->
            :duration="5000"
            <!-- 载入时自动执行一次appear动画 -->
            appear
            enter-active-class="animate__animated animate__swing v-enter-active"
            leave-active-class="animate__animated animate__heartBeat v-leave-active"
            <div v-if="show">Dean😊💕</div>
        </transition>
————————————————

以上代码转自CSDN博主「dyw3390199」的原创文章

enter-active-class,中的class非自定义类名，不可修改。直接用class放哪儿就行

过渡持续时间

通过transition标签的duration属性设置过渡的持续时间，毫秒为单位。

<transition :duration="1000">...</transition>
也可分别定义进入和离开时间
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

JavaScript钩子

在transition标签属性中声明JavaScript钩子。

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>

</transition>

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
简单的实例

 <transition name="fade"
    enter-active-class="animate__animated animate__tada"
    leave-active-class="animate__animated animate__flipOutx"
    @enter="showenter"
    >
      <p v-show="show">this is animate</p>
    </transition>
    <button @click="show=!show">change</button>


    methods:{
 showenter(el){
   
   el.style.animationDuration="3s"
 }
}

默认传递的参数el就是我们transition标签中的元素或组件.

初始渲染

在transition的appear属性中设置初始渲染动画。

过渡模式

transition标签的默认行为：a离开和b进入同时进行，这就会导致页面重构出现问题。通常我们给标签加上绝对定位可以解决。但是同时离开和进入并不能满足需求。所以vue提供了过渡模式
通过transition标签的mode属性进行设置，属性值有两个：

• in-out:新元素先进行过渡，完成之后当前元素过渡离开。
• out-in:当前元素先进行过渡，完成之后新元素过渡进入。

<transition name="fade" mode="out-in">
 ...
</transition>

多个元素的过渡和多个组件的过渡

多个元素的过渡需要给元素添加key属性，而多个组件就简单很多，我们只需要使用动态组件即可。

列表过渡

• 列表过渡中，我们不在使用transition标签，转而使用transition-group标签
• transition标签会以一个真实的标签呈现，默认为一个span，也可以通过tag属性更改为其他元素。
• 与v-for一样，我们需要给transition-group标签指定唯一的key属性值。用于区分。
• css过渡将直接作用与内部元素中，而不是作用与标签本身。
• move,与enter一样，在元素移动时渲染动画
• 实例

  <div>
    <button @click="add">添加</button><button @click="remove">删除</button>
    <transition-group name="item" tag="p">
      <span v-for="item in list" :key="item" class="item-list">{{item}}</span>
    </transition-group>
  </div>

script部分代码

<script>
export default {
name:'ListTrans',
data(){
  return{
    list:[1,2,3,4,5,6,7,8,9],
    listNum:9,
  }
},
  methods:{
   add(){
     this.list.splice(this.randomIndex(),0,this.listNum++)
   },
   remove(){
     this.list.splice(this.randomIndex(),1)
   },
   randomIndex(){
     return Math.floor(Math.random()*this.list.length)
   }
  }
}
</script>

sytle代码

.item-list{
  display: inline-block;
  margin-right: 10px;
 
}
.item-enter-active,.item-leave-active,.item-move{
  transition: all 1s ;
}
.item-enter,.item-leave-to{
  opacity: 0;
  transform: translateY(30px);
}