关于vue项目兼容ie11那点事

本篇文章适合前端有一定基础的小伙伴，当然，对此篇文章感兴趣也可以提前了解，阅读大概耗时3分钟

前言

2022年了，是时候为自己的知识库加一些13效果出来了😏（当你分享给身边的人时一定是满眼的崇拜，多香），学过CSS基础的小伙伴心里肯定觉得太麻烦了，不想写（懒得写），没关系，今天我就带大家如何更简单的做一个动画效果，一定要看到最后喔。

认识一下

首先大家需要知道的是 过渡&动画 就是进入(显示)、离开(隐藏) 的意思，明白了这句话，后面的内容你看起来会很轻松。

至于它俩的区别在哪里，别着急，一步一步走，后面会告诉你两者的不同。

如何使用？

我们先去 Vue2 过渡&动画 官方遛一遛

你看，官网的文档多么的体贴，一个专门的 过渡&动画 专栏介绍，文档内容一边解释还一边示例，太不容易了，给个赞👍。

根据官方文档的介绍，提到了提供了 transition 的封装组件，你继续往下翻文档，你会发现css 的类名你看不懂，因为Dom元素中根据没有绑定其中的类，怎么回事呢？往下翻一翻，你会看到有一个 过渡的类名 标题，附图如下。

读了一遍后，其实它就是这个意思，你看看是不是和你想的一样呢

• v-enter：进入(显示)开始时的状态
• v-enter-active：进入(显示)过程中的状态
• v-enter-to：进入(显示)结束时的状态
• v-leave：离开(隐藏)开始时的状态
• v-leave-active：离开(隐藏)过程中的状态
• v-leave-to：离开(隐藏)结束时的状态
• 如果 transition 组件没有 name 属性值，默认类名的前缀是 v-，如上面的 v-enter、v-leave，如果有 name 属性，假设值为 fade ，那么过渡的类名就会变为 fade-enter、fade-leave 这样表示

大概意思就是这，那么咱们实现一下吧，其中的Vue基础知识我就不细说了啊，有不明白自己上网找资料查缺补漏一下吧😋

1. 过渡

代码

<template>
  <div class="transition-container">
  // 按钮，!ishow 表示取反的意思
    <button @click="isShow = !isShow">切换</button>
  // 过渡&动画组件
    <transition name="first">
    // 盒子
      <div class="box" v-show="isShow"></div>
    </transition>
  </div>
</template>
​
<script> export default {
  name: 'transitionWrap',
  data () {
    return {
      // 控制盒子显示与隐藏，false为隐藏，true为显示, 默认隐藏
      isShow: false
  }}
} </script>
​
<style lang="less" scoped> // 盒子
.box {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 10px auto;
}
​
// 进入(显示)开始时和离开(隐藏)结束时效果
.first-enter,
.first-leave-to {// 设置透明度，0表示隐藏，1表示显示，我这里解释的并不是很对，这是css基础知识，大家可以在w3C中查找资料了解一下
  opacity: 0;
}
​
// 进入(显示)过程中和离开(隐藏)过程中的效果
.first-enter-active,
.first-leave-active {// 设置过渡持续时间
  transition: all 1s;
} </style> 

实现效果

为了让大家更容易理解，所以并没有写很难的案例，看完是不是觉得这并没有什么难的，嘿嘿，如果让你一个按钮控制两个盒子不同的过渡效果，一个显示和隐藏，一个是向右移动，那么该怎么实现呢？

答：这里我只口述思路了，就不再放代码和效果了，因为我一说你就懂，首先，需要写两个