记录一下今天在vue的transition中遇到的坑

<!DOCTYPE html>

<html>

<head>

    <title>Vue中CSS动画原理</title>

    <script type="text/javascript" src="../vue.min.js"></script>

    <!-- 定义动画样式 -->

    <style type="text/css">

        .v-enter{

            opacity: 0;

        }

        .v-enter-active{

            transition: opacity 3s;

        }

    </style>

</head>

<body>

    <div id="root">

        <!-- 动画 -->

        <transition name="myfade">

        <!-- name属性的值作为fade-enter fade-enter-active等开头的名字 -->

            <div v-if="show">hello world</div>

        </transition>

        <button @click="change">切换</button>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: "#root",

            data: {

                show: true

            },

            methods: {

                change: function () {

                    this.show = !this.show

                }

            }

        });

    </script>

</body>

</html>

被告知 transition 的 name 属性是可以自己随意设置的，于是给了 myfade，结果发现没有效果。

后来研究了下发现，这个 name 的值是用来替换 v-enter 的 v

于是修改成

　　<style type="text/css">

        .myfade-enter{

            opacity: 0;

        }

        .myfade-enter-active{

            transition: opacity 3s;

        }

    </style>

就OK了~

另注：transition 只有 name 这一个属性，且只有一个子元素，这个子元素需要 v-if 或 v-show 来控制是否显示。

vue的transition的name作用的更多相关文章

  1. vue项目的各个文件作用

    vue项目的各个文件作用: build:放置的是webpack配置文件,一般不动,修改了必须重启服务器才能生效 config:放置针对开发环境和线上环境的配置文件,一般不动 修改后需重启 node_m ...

  2. php开发面试题---vue面试题（vue.js的好处及作用）

    php开发面试题---vue面试题(vue.js的好处及作用) 一.总结 一句话总结: 双向数据绑定:在做ajax的时候,更新实在是太方便了 用数据绑定的思想,vue可以简单写单个页面,也可以写一个大 ...

  3. 在 vue 中用 transition 实现轮播效果

    概述 今天我接到一个需求:轮播效果.本来我是打算使用 Swiper 实现的,但是想起来貌似 transition 也能实现.于是就试了下,真的可以,还挺简单的,于是就记录下来,供以后开发时参考,相信对 ...

  4. vueX、vue中transition的使用、axios

    引入一篇好文章链接:看一遍就会的vuex文章;完!!! vue中transtion的使用:transition文章;完!!! axios的文章:axios;完!!!

  5. Vue中transition和animation的使用

    一:二者的对比 1.动画循环就用animation.在animation中有一个animation-iteration-count属性可以定义循环次数.transition是执行一次以后就不会执行,但 ...

  6. vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  7. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  8. vue中 key 值的作用

    原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...

  9. vue的transition过渡效果

    需要4个类: *-enter: 进入的开始状态, *-enter-active: 进入的结束状态, *-leave: 离开的开始状态, *-leave-active: 离开的结束状态 vue-rout ...

随机推荐

  1. python2.X与3.X比较及Python编译器选择

  2. HtML5与CSS3基础

    HTML标签 1.<a></a> 超链接标签 属性 href:跳转页面的连接 name:实现定锚功能,跳转同一页面不同位置(例返回顶部) target: (self, pare ...

  3. CF-Div.3-B. Minimize the Permutation【模拟·需要清醒的脑子】

    题目传送门 根据字典序,是个人都会想到依次把目前最小的数尽量往前面移动,直到它不能再往前移动,或者已经到了它的期望位置(就是排列的那个位置 比如$i$就应该在位置$i$)为止. 所以我刚开始是这么写的 ...

  4. java 内容仓储

    什么是JAVA内容仓库(Java Content Repository)(2) 转载 自:http://blog.csdn.net/vltic/article/details/7249395 内容仓库 ...

  5. springcloud用法

    springcloud用法 使用springcloud搭建微服务肯定要在父工程下面编写子工程 一.搭建eureka注册中心 1.    创建maven项目(在springboot项目下建立子工程eur ...

  6. Python自学

    print("\u4e2d\u56fd\") 报错,语法错误 修改,去掉尾部的\,正确 import datetimeprint("now:"+datetime ...

  7. GitHub 上有哪些优秀的 Python 爬虫项目？

    目录 GitHub 上有哪些优秀的 Python 爬虫项目? 大型爬虫项目: 实用型爬虫项目: 其它有趣的Python爬虫小项目: GitHub 上有哪些优秀的 Python 爬虫项目? 大型爬虫项目 ...

  8. 【Linux】C字节对齐

    原文地址:https://www.jianshu.com/p/e8fcc01041a7 什么是对齐,以及为什么要对齐: 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问 ...

  9. tornado源码简单实现

    首先基本的同步流程是: class Index(tornado.web.RequestHandle): def get(self): self.write('hellow,word') app = t ...

  10. CSS 相对定位 绝对定位

    css中的相对定位和绝对定位. 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将 ...