详解vue2.0 transition 多个元素嵌套使用过渡


Posted in Javascript onJune 19, 2017

在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition?

我的代码:

<div id='demo'>
    <button @click="show = !show">按钮</button>
    <transition name='move'>
      <div class="v-d" v-show="show">
        <div class='in in_move'></div>
      </div>
    </transition>
  </div>
//css
.v-d{
      width:50px;
      height:50px;
      padding:10px;
      transition: all 0.4s linear
    }
    .v-d .in{
      width:30px;
      height:30px;
      background:#000;
      transition: all 0.4s linear
    }
    .move-enter-active, .move-leave-active{
      transition: all 0.4s linear
    } 
    .move-enter, .move-leave-active{
      opacity: 0;
      transform: translateX(30px);
    } 
    .move-enter, .move-leave-active .in{
      transform: rotate(45deg)
    }
//js
window.onload = function(){
    new Vue({
     el: '#demo',
     data: {
      show: false
     }
    })
  }

运行代码后发现这个类名的过渡:

.move-enter, .move-leave-active .in{
  transform: rotate(180deg)
}

没起作用,我开始以为这种嵌套的写法不支持,但是后来经过多次尝试后发现,原来transition 应用的类名不能和基本样的类名一样,也就是.in这个类必须换名才能起作用,所以在改动下面代码:

<transition name='move'>
 <div class="v-d">
  <div class='in in_move'></div>
 </div>
</transition>

.move-enter, .move-leave-active .in_move{
  transform: rotate(180deg)
}

改完运行就ok了,实现了元素旋转和位移。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
vue中如何实现变量和字符串拼接
Jun 19 #Javascript
js实现随机数字字母验证码
Jun 19 #Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 #Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 #Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 #Javascript
AngularJS的ng-click传参的方法
Jun 19 #Javascript
JavaScript队列函数和异步执行详解
Jun 19 #Javascript
You might like
PHP学习之数组值的操作
2011/04/17 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
Python脚本实现格式化css文件
2015/04/08 Python
python 队列详解及实例代码
2016/10/18 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
《维生素c的故事》教学反思
2014/02/18 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
酒鬼酒广告词
2014/03/21 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
老乡聚会通知
2015/04/23 职场文书
八年级历史教学反思
2016/02/19 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
如何利用python创作字符画
2022/06/25 Python