脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue animate.css

vue过渡和animate.css结合使用详解

 更新时间：2017年06月14日 15:43:55   作者：22337383  
本篇文章主要介绍了vue过渡和animate.css结合使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

今天学习了vue过渡和animate.css结合使用，所以，添加一点小笔记。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动画</title>
  <script type="text/javascript" src="vue.js"></script>
  <link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" >
  <style type="text/css">
    p {
      width: 300px;
      height: 300px;
      background: red;
      margin: 10px auto;
    }
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var app = new Vue({
        el:'#box',
        data:{
          show:false
        }
      })
    }
  </script>
</head>
<body>
  <div id="box">
    <!-- 控制数据的值切换显示隐藏 -->
    <button @click="show=!show">transition</button>
    
    <!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
      <p v-show="show" class="animated"></p>
    </transition> -->

    <!-- 第二种方法 -->
    <!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
      <p v-show="show"></p>
    </transition> -->

    <!-- 多元素运动 -->
    <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
      <p v-show="show" class="animated" :key="1"></p>
      <p v-show="show" class="animated" :key="2"></p>
    </transition-group>
  </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue3使用video.js播放m3u8格式视频的操作指南

    vue3使用video.js播放m3u8格式视频的操作指南

    有时候我们需要播放 m3u8 格式的视频,或者实现视频播放器更多定制化需求,HTML 的 video 元素无法实现这些需求,这时候可以考虑使用 Video.js,本文给大家介绍了vue3使用video.js播放m3u8格式视频的操作指南,需要的朋友可以参考下
    2024-07-07
  • 前端vue实现甘特图功能

    前端vue实现甘特图功能

    dhtmlxGantt是一个强大的JavaScript Gantt图表库,提供易于使用、高度可自定义的Gantt图表组件,它支持多项任务和进度条,以及多种列和行布局,可用于创建各种类型的时间线和计划表,本文给大家介绍前端vue实现甘特图的相关知识,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • vue实现输入一位数字转汉字功能

    vue实现输入一位数字转汉字功能

    这篇文章主要介绍了vue实现输入一位数字转汉字功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)

    element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)

    这篇文章主要介绍了element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Vue3处理错误边界(error boundaries)的示例代码

    Vue3处理错误边界(error boundaries)的示例代码

    在开发 Vue 3 应用时,处理错误边界（Error Boundaries）是一个重要的考量,在 Vue 3 中实现错误边界的方式与 React 等其他框架有所不同,下面,我们将深入探讨 Vue 3 中如何实现错误边界,并提供一些示例代码帮助理解什么是错误边界,需要的朋友可以参考下
    2024-10-10
  • vue项目之index.html如何引入JS文件

    vue项目之index.html如何引入JS文件

    这篇文章主要介绍了vue项目之index.html如何引入JS文件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • 在Vue3中实现拖拽文件上传功能的过程详解

    在Vue3中实现拖拽文件上传功能的过程详解

    文件上传是我们在开发Web应用时经常遇到的功能之一,为了提升用户体验,我们可以利用HTML5的拖放API来实现拖拽文件上传的功能,本文将介绍如何在Vue3中实现这一功能,文中有详细的代码示例供大家参考,需要的朋友可以参考下
    2023-12-12
  • 在vue中阻止浏览器后退的实例

    在vue中阻止浏览器后退的实例

    今天小编就为大家分享一篇在vue中阻止浏览器后退的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue组件中修改组件外元素样式的两种解决方案

    vue组件中修改组件外元素样式的两种解决方案

    这篇文章主要介绍了vue组件中修改组件外元素样式,本文给大家分享两种解决方案帮助大家解决这样的问题，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-05-05
  • vue中v-cloak的作用和原理解析

    vue中v-cloak的作用和原理解析

    v-cloak原理是先通过样式隐藏内容,然后在内存中进行值的替换,将替换的内容再反馈给界面,数据渲染完场之后,v-cloak 属性会被自动去除,本文详细介绍vue中v-cloak的作用和原理解析,感兴趣的朋友一起看看吧
    2023-09-09

最新评论