Vue入门教程13-过渡效果和动画

最新推荐文章于 2023-05-09 10:04:59 发布

芒种的农民

最新推荐文章于 2023-05-09 10:04:59 发布

阅读量332

点赞数

分类专栏： Vue系列教程文章标签： Vue 动画 transition JavaScript 前端学习

本文链接：https://blog.csdn.net/weixin_44588191/article/details/103157358

版权

一、过渡效果

当插入或删除 transition 组件中的元素时，Vue 将会做以下处理：

1、自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，会根据过渡或动画的设置在恰当的时机添加/删除 CSS 类名。
2、如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
4、如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 插入/删除操作在下一帧中立即执行。

下面的一个动画渐入、渐出的显示效果：

<template>
  <div id="app">
       <button v-on:click = "show = !show">切换动画效果</button>
      <transition name="demo01">
        <h3 v-show="show" v-bind:style="styleClass">动画效果显示</h3>
      </transition>
  </div>
</template>
<script>
  export default {
   
    name: 'app',
    data(){
   
      return{
   
        show:true,
         styleClass: