transition效果出不来

来源：4-4 过渡动画-css实现过渡（上）

英姿飒爽豆腐块

2017-10-27

<div class="ab">
        <button @click="show0 = !show0">toggle</button>
        <transition name="slide-fade">
          <p v-show="show0">i am show</p>
        </transition>
      </div>

点击显示隐藏没有问题，但是就是效果出不来，难道fade需要自己定义一下效果时间才可以吗？没有默认效果？

写回答

2回答

fishenal

2017-10-27

是自定义的，通过css3动画

.slide-trans-enter-active {

transition: all .5s;

}

.slide-trans-enter {

transform: translateX(900px);

}

.slide-trans-old-leave-active {

transition: all .5s;

transform: translateX(-900px);

}

比如这样，slide-trans是transition的name

英姿飒爽豆腐块

提问者

2017-10-27

大概知道了，这个应该是自己手动添加类的效果才行，本身没有默认的

最容易上手的Vue2.0入门实战教程

快速入门Vue2.0，组件化开发一个数字产品电商平台

3966 学习 · 999 问题

查看课程

相似问题

transition动画照着官网敲的，没生效，谁帮忙解释一下原因

回答 1

那个transition，没有效果啊

回答 2

你好，老师，关于transform位移过渡效果的问题

回答 1

为什么报错了？提示Uncaught TypeError: delayedLeave is not a function

回答 2

我使用mock的时候也不报错就是出来问题看截图

回答 2

打开慕课网App查看更多内容