[JavaScript知识库]vue之内置的动画效果

vue之内置的动画效果

fade 过度显示隐藏动画效果

精简写法1

<template>
  <div class="home">
    <button @click="btnShow">点击显示</button>
    <!-- transition包裹一个元素后，这个元素的显示和隐藏就会自动添加一些类名 -->
    <transition name="dialog">
      <div v-show="visible">我是动画</div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    btnShow() {
      this.visible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
/* dialog的淡入淡出 动画 
// 当前dialog包裹的 内容 进入前的样式
.dialog-enter {
  opacity: 0;
}
// 进入后的样式 
.dialog-enter-to {
  opacity: 1;
}
//整个动画进入效果 
.dialog-enter-active {
  transition: all 0.5s;
}
//动画离开前的效果 
.dialog-leave {
  opacity: 1;
}
// 动画离开后的样式 
.dialog-leave-to {
  opacity: 0;
}
//整个动画离开效果
.dialog-leave-active {
  transition: all 0.5s;
}
*/

/* 更优写法 执行动画 */
.dialog-enter-active {
  animation: run 0.5s;
}
.dialog-leave-active {
  animation: run 0.5s reverse;
}

@keyframes run {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.home {
  height: calc(100% - 34px);
  width: calc(100% - 34px);
  background: #fff;
  padding: 16px;
  border: 1px solid #ccc;
}
</style>