Vue前端开发之自定义动画样式

在上一小节中，我们介绍了动画的实现源于6个类别样式，它们的名称默认前缀是一个“v”字母或者指定的名称，如“sc”，其实，也可以不使用这些固定的类别样式，开发者可以自定义任意的类别样式，供动画组件调用，同样也可以实现元素的动画效果。

在动画组件transition中，可以接收自定义类别样式的属性有6个，名称分别为：enter-from-class、enter-active-class、enter-to-class、leave-from-class、leave-active-class和leave-to-class，它们的功能与动画组件默认6个类别样式一致。

接下来通过一个示例来演示如何调用自定义动画样式来实现元素的动画效果。

实例5-3 应用自定义动画样式

1. 功能描述

在上述示例5-1的基础上，当单击按钮时，通过应用自定义动画的样式，实现元素以动画的形式显示与隐藏。

2. 实现代码

在项目components 文件夹的ch5子文件夹中，添加一个名为“CustClassName”的.vue文件，在文件中加入如清单5-3所示代码。

代码清单5-3 CustClassName.vue代码

<template>
  <div class="action">
    <div class="act">
      <input type="button" @click="startTrans()" 
:value="blnShow ? '隐藏动画' : '显示动画'">
    </div>
    <transition enter-active-class="enter" 
leave-active-class="leave">
      <div class="mytrans" v-if="blnShow"></div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "CustClassName",
  data() {
    return {
      blnShow: true
    };
  },
  methods: {
    startTrans() {
      this.blnShow = !this.blnShow;
    }
  },
};
</script>
<style>
.enter {
  animation: myanimate 0.5s;
}
.leave {
  animation: myanimate 0.5s reverse;
}
@keyframes myanimate {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0px);
  }
}
.action .act {
  margin: 10px 0;
}
.action .act input {
  width: 80px;
  height: 32px;
}
.mytrans {
  width: 200px;
  height: 30px;
  background-color: #ccc;
}
</style>

3. 页面效果

保存代码后，页面在Chrome浏览器下执行的页面效果如图5-4所示。

4. 源码分析

在上述示例的代码中，向动画组件transition 的enter-active-class和leave-active-class属性添加了两个自定义的类别样式，从而实现了元素的动画效果。

另外，在动画组件包裹的元素虽然应用了动画效果，但它必须要通过样式的切换来才会触发，如元素的显示与隐藏，组件也允许首次渲染完成后就自动触发，只需要向组件添加一个名称为appear所属性，如下代码所示。

<transition enter-active-class="enter" 
leave-active-class="leave" appear>
      <div class="mytrans" v-if="blnShow"></div>
</transition>

无论是何种动画效果，只要在组件中添加该属性，那么，当组件中元素首次渲染完成后，都会自动触发设置的动画效果一次。

原文地址：https://blog.csdn.net/chuanshixx/article/details/143568305

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！