在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition? 
我的代码:代码中元素整体做平移,里面的inner中做旋转,实现一个圆形滚动的效果

<transition name="move">
<div class="cart-decrease" @click="decreaseCart" v-show="food.count>0">
<span class="inner icon-remove_circle_outline"></span>
</div>
</transition> 样式:
.cart-decrease{
display:inline-block;
padding:6px;
opacity:1;
transform:translate3D(0,0,0);
&.move-enter-active{
opacity:1;
transform:translate3D(0,0,0);
transition:all 0.4s linear;
}
&.move-enter{
opacity:0;
transform:translate3D(24px,0,0);
.inner{
transform: rotate(180deg)
}
}
&.move-leave{
opacity:1;
transform:translate3D(0,0,0);
}
&.move-leave-active {
opacity:0;
transform:translate3D(24px,0,0);
transition:all 0.4s linear;
.inner{
transform: rotate(180deg)
} }
.inner{
display:inline-block;
font-size:24px;
color:rgb(0,160,220);
line-height:24px;
transition:all 0.4s linear;
}
}

vue2.0 transition 多个元素嵌套使用过渡的更多相关文章

  1. vue2.0 transition -- demo实践填坑

    前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...

  2. 【重点突破】—— Vue2.0 transition 动画Demo实践填坑

    前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...

  3. Vue2.0 Transition常见用法全解惑

    Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑.这里只涉及单元素 ...

  4. vue2.0 transition 手风琴

    <div class="food"> <button @click="show=!show">show</button> & ...

  5. vue2.0中怎么获取元素

    在元素上添加 v-el:food-wrapper (不用驼峰的写法) vue1版本 报错: vue2版本 (vue2把vue1中的 v-el 改为了 ref vue1 v-el:foods-wrapp ...

  6. vue2.0 transition用法

    html: <div id="demo"> <button v-on:click="show = !show"> Toggle < ...

  7. vue1.0和vue2.0的区别(一)

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...

  8. Vue2.0中的transition组件

    组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...

  9. vue2.0学习笔记之路由(二)路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Material design之New Widgets(RecyclerView CardView)

    New Widgets:提供了两个新的控件 RecyclerView CardView 这两个控件包含在了Android L的support library中, 他们可以用于显示复杂的布局而且都默认采 ...

  2. 第七篇:使用 fcntl 函数 获取,设置文件的状态标志

    前言 当打开一个文件的时候,我们需要指定打开文件的模式( 只读,只写等 ).那么在程序中如何获取,修改这个文件的状态标志呢? 本文将告诉你如何用 fcntl函数 获取指定文件的状态标志. 解决思路 1 ...

  3. 面试题思考:IO 和 NIO的区别,NIO优点

    面试时答: IO是面向流的,NIO是面向缓冲区的 Java IO面向流意味着每次从流中读一个或多个字节,直至读取所有字节,它们没有被缓存在任何地方: NIO则能前后移动流中的数据,因为是面向缓冲区的 ...

  4. "_dns_free_resource_record", referenced from:问题

    本文转载至 http://blog.csdn.net/woaifen3344/article/details/41309471 _dns_free_resource_r_dns_free环信SDK集成 ...

  5. iOS捕获异常,常用的异常处理方法

    本文转载至 http://www.cocoachina.com/ios/20141229/10787.html 前言:在开发APP时,我们通常都会需要捕获异常,防止应用程序突然的崩溃,防止给予用户不友 ...

  6. RadioButton ---- 样式效果切换

    \res\drawable\radio_button_bg.xml <?xml version="1.0" encoding="utf-8"?> & ...

  7. Eclipse虚拟内存不足【Eclipse中虚拟内存设置】

    Eclipse最近在做J2EE项目中 发现老是出现虚拟内存不足的提示 前2天去加了根内存 问题同样存在 为了让我在写代码时 不在出现那讨厌的内存不足的提示 也为了 不让那破机器再卡住 今天找到了解决方 ...

  8. Android 4.4 (KitKat) SMS Apis Change——Android 4.4的一个重大变化

    Android团队通过Android开发博客透漏今年会放出Android 4.4 (KitKat) ,同时更新了 SMS 的部分API.博客上讲只有default SMS app才能对短信数据库有写权 ...

  9. POJ 1423 Greatest Common Increasing Subsequence【裸LCIS】

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

  10. [PowerShell]–Checking the version of Office installed

    – Create and initialize the object $objExcel = New-Object -ComObject Excel.Application – Query the v ...