Vue使用过渡类名实现动画和自定义前缀

1.效果演示

2.相关代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <!--2.自定义两种样式 控制transition实现内部动画-->

    <style>

        /*[这是一个时间点]v-enter是进入前元素的起始状态 还没开始进入*/

        /*[这也是一个时间点]v-leave-to是动画离开之后的终止状态,此时元素动画已经结束了*/

        .v-enter,

        .v-leave-to{

            opacity: 0;

            transform: translateX(80px);

        }

        /*v-enter-active [入场动画的时间段]*/

        /*v-leave-active [离场动画的时间段]*/

        .v-enter-active,

        .v-leave-active{

            transition: all 0.4s ease;

        }

    </style>

</head>

<body>

<div id="app">

    <input type="button" value="toggle" @click="flage=!flage">

    <!--//点击h3显示 再点击隐藏-->

    <!--1.使用transition 元素 吧需要被动画控制的元素包裹起来-->

    <transition>

        <h3 v-if="flage">这是一个h3</h3>

    </transition>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            flage: false

        },

        methods: {}

    })

</script>

</body>

</html>

自定义前缀.my-enter-active

1.效果演示:

2.相关代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script src="../js/vue-resource-1.3.4.js"></script>

    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <!--2.自定义两种样式 控制transition实现内部动画-->

    <style>

        /*[这是一个时间点]v-enter是进入前元素的起始状态 还没开始进入*/

        /*[这也是一个时间点]v-leave-to是动画离开之后的终止状态,此时元素动画已经结束了*/

        .v-enter,

        .v-leave-to{

            opacity: 0;

            transform: translateX(80px);

        }

        /*v-enter-active [入场动画的时间段]*/

        /*v-leave-active [离场动画的时间段]*/

        .v-enter-active,

        .v-leave-active{

            transition: all 0.4s ease;

        }

        /*=============*/

        .my-enter,

        .my-leave-to{

            opacity: 0;

            transform: translateY(70px);

        }

        .my-enter-active,

        .my-leave-active{

            transition: all 0.8s ease;

        }

    </style>

</head>

<body>

<div id="app">

    <input type="button" value="toggle" @click="flage=!flage">

    <!--//点击h3显示 再点击隐藏-->

    <!--1.使用transition 元素 吧需要被动画控制的元素包裹起来-->

    <transition>

        <h3 v-if="flage">这是一个H3</h3>

    </transition>

<hr>

    <input type="button" value="toggle2" @click="flage2=!flage2">

    <!--//点击h3显示 再点击隐藏-->

    <!--1.使用transition 元素 吧需要被动画控制的元素包裹起来-->

    <transition name="my">

        <h6 v-if="flage2">这是一个H6</h6>

    </transition>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            flage: false,

            flage2: false

        },

        methods: {}

    })

</script>

</body>

</html>

Vue使用过渡类名实现动画和自定义前缀的更多相关文章

  1. 黑马vue---46、vue使用过渡类名实现动画

    黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...

  2. Vue学习笔记【18】——Vue中的动画（使用过渡类名）

    为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能: 使用过渡类名 步骤分析  需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏  1. 使用 transition 元素, ...

  3. Vue相关(过渡动画)

    Vue 过渡 && 动画 一.CSS过渡 1.transition标签可以用来封装需要过渡的元素,添加entering/leaving 过渡, 条件是: (1)使用条件渲染语句 v-i ...

  4. VUE：过渡&动画

    VUE:过渡&动画 vue动画的理解 1)操作css的 trasition 或 animation 2)vue会给目标元素添加/移除特定的class 3)过渡的相关类名 xxx-enter-a ...

  5. Vue列表过渡

    前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...

  6. Vue.js 相关知识（动画）

    1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...

  7. vue 路由过渡动效

    <router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition name="slid ...

  8. vue用js部分控制动画实现

    上次我们提到用vue实现过渡动画,其实只讲了vue动画的一部分,用vue自带的css状态控制动画实现,不带js http://www.cnblogs.com/null11/p/7081506.html ...

  9. vue移动端转场动画

    vue移动端转场动画 1.介绍:使用vue移动端做项目的时候,为了用户的体验良好,我们需要页面有一种进入和转出的效果 // 在App.vue根组件中 <template> <div ...

随机推荐

  1. 笔记：记录两个新接触的东东- required + placeholder

    1.1 required="required" 1.2 placeholder 当用户还没有输入值时,输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息, ...

  2. Hdu2952 Counting Sheep 2017-01-18 14:56 44人阅读 评论(0) 收藏

    Counting Sheep Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Tota ...

  3. android RadioButton文字居中的方法

    每个RadioButton的style原先是这样的: <style name="radiobutton_style" > <item name="and ...

  4. net_framework-EF CodeFirst

    CodeFirst——手动创建POCO类(Plain Old CLR Object,即平时认识的ado.net实体类),类之间的关系使用代码定义.当应用程序首次执行时,EF将在数据库服务器中自动生成数 ...

  5. C#使用MongoDb来存储文件

    近期在写一个小玩意,需要保存一些图片,以前我采用的是FTP或者直接数据库保存文件,用FTP来保存文件感觉比较麻烦,用数据库吧,还要改字段类型,修改代码,修改查询语句,懒得改. 以前看过mongonDb ...

  6. day74天中间件介绍

    一. importlib settings 执行结果: 两个process_request  process_response按照注册顺序的倒叙进行执行 PROCESS_VIEW  Process_v ...

  7. 【2019年OCP新题】OCP题库更新出现大量新题-11

    11.Your database is in archivelog mode. You want to disable archiving for the database. Examine thes ...

  8. win10 下Oracle安装

    在win10 64bit下安装oracle 11的时候,有些问题不注意,安装的时候才遇到就gg了.下面将介绍win10下安装oracle 11的步骤以及安装过程中遇到的一些问题及解决方案. 安装过程中 ...

  9. bzoj4519: [Cqoi2016]不同的最小割（最小割树）

    传送门 好神仙……最小割树是个什么东西…… 其实我觉得干脆直接$O(n^2)$跑几个dinic算了…… 来说一下这个叫最小割树的神奇东西 我们先建一个$n$个点,没有边的无向图 在原图中任选两点$s, ...

  10. iOS 多Target， Other link Flag

    在创建多个马甲包或者多个App间只有很小的差异是使用多Target是一种很好的方法 https://www.jianshu.com/p/18db54655246 1:选中原始的Target, 点击右键 ...