vue动画实现方式

<!DOCTYPE html>

<html lang="zh-cn">

    <head>

        <meta charset="utf-8">

        <link rel="stylesheet" href="animate.css">

        <style>

        * {

            margin: 0;

            padding: 0;

        }

        #app{

            width: 600px;

            margin: 100px auto;

        }

        .box {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        button {

            width: 50px;

            height: 30px;

        }

        /* 第二步 定义入场动画 和 出场动画 */

        /* 格式： 动画名-enter 入场动画*/

        /* 格式： 动画名-leave 出场动画*/

        /* 进入过渡开始时的状态和离开过渡结束时的状态 */

        .fade-enter,.fade-leave-to{

            opacity: 0;

            transform:translate(500px, 0);

        }

        /* 进入过渡中的效果和离开过渡中的效果 */

        .fade-enter-active,.fade-leave-active{

           transition: all 0.8s;

        }

         /* 进入过渡结束时的状态和离开过渡结束时的状态 */

         .fade-enter-to,.fade-leave{

            opacity: 1;

         }

        .bounce-enter-active{

            animation: bounce-in .5s;

        }

        .bounce-leave-active {

            animation: bounce-in .5s reverse;

        }

        @keyframes bounce-in{

              0% {

                transform: scale(0);

              }

              50% {

                transform: scale(1.5);

              }

              100% {

                transform: scale(1);

              }

        }

            .pp{

                background-color: #c05;

            }

        </style>

    </head>

    <body>

        <div id="app">

            <!-- 1.过渡 -->

            <button @click="isShow = !isShow">过渡</button>

            <!-- 第一步给要动画的元素 起个动画名子 -->

            <!-- 格式:  name=动画名 -->

            <transition name="fade" :duration="3000">

                <p class="box" v-show="isShow">我要过渡</p>

            </transition>

            <hr>

            <!-- 2.动画 -->

            <button @click="isShow2 = !isShow2">动画</button>

            <!-- 第一步给要动画的元素 起个动画名子 -->

            <!-- 格式:  name=动画名 -->

            <transition name="bounce" :duration="{ enter: 1000, leave: 1800 }">

                <p class="box" v-if="isShow2">我要运动</p>

            </transition>

            <!-- 3.自定义过渡 类名 -->

            <button @click="show = !show">自定义</button>

            <transition

                enter-active-class="animated tada"

                leave-active-class="animated bounceOutRight"

            >

                <p v-if="show" class="pp">hello</p>

            </transition>

        </div>

        <script src="velocity.js"></script>

        <script src="vue.js"></script>

        <script>

        var vm = new Vue({

            data: {

                isShow: true,   //过渡

                isShow2:true,   //动画

                show:true,

            },

            methods: {

            }

        }).$mount('#app');

        </script>

    </body>

</html>

vue动画实现方式的更多相关文章

  1. vue动画理解，进入、离开、列表过度和路由切换。

    vue的动画对于很多初学者,甚至对很多老鸟来说也是很费劲,不容易控制的. 这篇文章讲vue动画的理解.其实没那么难. 动画理解 一个元素从A状态变成B状态,如果这个过程通过某种方式反应在视图上了,那么 ...

  2. Vue动画操作

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

  3. Javascript - Vue - 动画

    动画状态类名 vue动画通过将需要执行动画的标签放入transition标签中,再通过设置预置的vue动画类名的css样式来控制动画的呈现效果. 开场动画状态的三个类名 v-enter:动画开始之前的 ...

  4. vue动画的用法

    vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就 ...

  5. iOS页面切换动画实现方式。

    iOS页面切换动画实现方式. 1.使用UIView animateWithDuration:animations:completion方法 Java代码 [UIView animateWithDura ...

  6. vue动画及其原理

    1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2,  我们以两张 ...

  7. vue教程3-02 vue动画

    vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...

  8. vue组件定义方式，vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  9. vue 动画原理 part1

    Vue动画原理 增加和删除css增加样式实现一个过渡效果也就是动画效果 1.需要动画效果的标签外包裹一个transition标签 会被自动分析css样式,然后自动构建一个动画流程 transition ...

随机推荐

  1. 跨平台版本迁移之 XTTS 方案操作指南

    本文转自 https://blog.csdn.net/Enmotech/article/details/80045576 作者 | 罗贵林: 云和恩墨技术工程师,具有8年以上的 Oracle 数据库工 ...

  2. tensorflow 神经网络模型概览；熟悉Eager 模式；

    典型神经网络模型:(图片来源:https://github.com/madalinabuzau/tensorflow-eager-tutorials) 保持更新,更多内容请关注 cnblogs.com ...

  3. 关于AttributeError: 'NoneType' object has no attribute 'send_keys'

    在学web自动化测试时,通过PO模型将特定页面的一些元素及元素操作放在特定页面模块中, 然后提取公共的部分, 如元素等待WebDriverWait, 元素操作send_keys, click, 获取元 ...

  4. 阿里云搭建wordpress博客教程

    一 :搭建环境 1.安装Apache环境 在线安装Apache yum install httpd 启动Apache服务 service httpd start 设置开机自启动 chkconfig h ...

  5. devops--django+ldap

    首先,什么是Ldap,官方解释 轻型目录访问协议(英文:Lightweight Directory Access Protocol,缩写:LDAP,/ˈɛldæp/)是一个开放的,中立的,工业标准的应 ...

  6. linux下录屏和回放工具script和scriptreplay

    读书是一个长见识的过程,以前偶尔会用到录屏的工具,很少用想系统的学习一下.最近看了linux shell脚本攻略,发现很多新东西是以前自己没有接触到的.比如,这个非常好用的录屏工具:script,这次 ...

  7. C#添加错误日志信息

    错误日志是软件用来记录运行时出错信息的文本文件.编程人员和维护人员等可以利用错误日志对系统进行调试和维护. 系统日志 系统日志包含了由Windows系统组件记录的事件.例如,在启动期间装入驱动程序或其 ...

  8. APP自动化针对PO模式进行二次封装之basepage

    APP自动化跟WEB自动化所使用的框架基本一样,都是采用的PO模式结合pytest框架编写自动化测试脚本,为了提高代码的复用性.稳定性和易维护性,我们针对PO模式进行了二次封装,将日志,等待以及异常截 ...

  9. 【转载】【PAT】PAT甲级题型分类整理

    最短路径 Emergency (25)-PAT甲级真题(Dijkstra算法) Public Bike Management (30)-PAT甲级真题(Dijkstra + DFS) Travel P ...

  10. Python之format()函数

    Python2.6开始,新增了一种格式化字符串的函数format(),它增强了字符串的格式化功能.(官方推荐) 基本语法是通过{}和:来代替以前的% format()函数可以接收不限个参数,位置可以不 ...