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. python读取文件，python读取的1变成\ufeff1

    '\ufeff1' movies={} fm=open(self.path+'/movie.txt',encoding='utf-8') w2=open('./data/1.txt','a') for ...

  2. 75. Sort Colors(颜色排序) from LeetCode

      75. Sort Colors   给定一个具有红色,白色或蓝色的n个对象的数组,将它们就地 排序,使相同颜色的对象相邻,颜色顺序为红色,白色和蓝色. 这里,我们将使用整数0,1和2分别表示红色, ...

  3. （KMP 扩展）Clairewd’s message -- hdu -- 4300

    http://acm.hdu.edu.cn/showproblem.php?pid=4300 Clairewd’s message Time Limit: 2000/1000 MS (Java/Oth ...

  4. (dp)Tickets --HDU --1260

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1260 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  5. 用VS2010编译python2.7的源码

    1.下载python2.7的源码,解压缩如下目录 2. 网上有些教程说从PCbuild目录中进入,打开sln文件,但是我这样做是不能用vs2010打开的, 并且也尝试了用VS2013打开sln,但是是 ...

  6. 【spfa训练】HDU4725 （层级建图）

    HDU4725 题目大意:一些节点分布在不同的层上,已知相邻的层可以往来距离为c,在给你一些已知的边,问你点1-n的最短路 分析:越往后做,越觉得最短路的考点已经不是spfa算法还是dijkscar算 ...

  7. Hibernate中OpenSessionInViewFilter（通常配置在web.xml文件中）的作用

    Spring为我们解决Hibernate的Session的关闭与开启问题. Hibernate 允许对关联对象.属性进行延迟加载,但是必须保证延迟加载的操作限于同一个 Hibernate Sessio ...

  8. windows eclipse IDE打开当前类所在文件路径

    1. 展开如下菜单: Run ---- External Tools ---- External Tools Configurations 2. 在 program 下面新建一个工具 program- ...

  9. Android-ColorsUtil工具类

    颜色工具类 public class ColorsUtil { private ColorsUtil() { throw new Error("Do not need instantiate ...

  10. 今天犯了一个StringBuilder构造函数引起的二逼问题。

    在.Net里,StringBuilder的构造函数有很多,最常用的是无参的构造函数,默认分配16个字符的空间.其次就是填写StringBuilder空间的带一个Int32的构造函数,这个在优化代码的时 ...