美文网首页
Vue中的CSS transition和animation

Vue中的CSS transition和animation

作者: meteornnnight | 来源:发表于2019-06-05 12:36 被阅读0次

1. Vue中的CSS transition过渡

当我们插入一个元素的时候,vue会在过渡的第0帧给<transition name="fade">标上"fade-enter","fade-enter-active"两个类名, 在过渡的第一帧删除"fade-enter",添加上"fade-enter-to", 在整个过渡动画结束之后,删除"fade-enter-to"和"fade-enter-active"类名。我们可以认为"fade-enter"和"fade-enter-to"是<transition>包裹的元素的两个状态,当我们在"fade-enter-active"中加入CSS transition rule, 就可以在整个过渡动画过程中检测到状态的变化,其实两个状态的切换往往就在第0帧和第1帧,检测到这一状态变化之后,css transition就会开始。

enter.png
删除一个元素的时候流程也是相似的:
leave.png
细节
<transition :duration='5000'>
    <div>hello</div>
</transition>
<style>
.v-enter,.v-leave-to{
    opacity: 0;
}
.v-enter-active,.v-leave-active{
    transition: all 1s ease;
}
</style>
  1. 我们可以显式定义过渡动画的持续时间。上述代码中,尽管transition:opacity的过渡动画在1s后就完成了,但是v-enter-to,v-enter-active两个类名会保持到5s结束。
  2. 因为transition其实是两个状态的切换,在实际情况中,.v-enter, .v-leave-to表示的其实是一个状态,因此往往采用相同的CSS rules。

2. Vue中的CSS animation动画

我们都知道CSS3中的animation不像transition需要状态改变来触发,因此我们可以直接在.v-enter-active,.v-leave-active中应用animation。我们可以自己通过keyframes自己创建动画,也可以引用外部的CSS动画库,比如说animated.css,里面是很多已经写好的keyframes动画。

3. 同时结合transition和animation的一个栗子

<style>    
       .slide-enter,.slide-leave-to{
                opacity: 0;
            }
            .slide-enter-active{
                transition: all 1s;
            }
            .slide-leave-active{
                transition: all 1s;
            }
</style>

        <div id="root">
            <button @click="show=!show">toggle</button>
            <transition 
            :duration="5000"
            name="slide" 
            appear
            enter-active-class="animated slideInUp slide-enter-active"
            leave-active-class="animated slideOutDown slide-leave-active"
            appear-active-class="animated slideInUp slide-enter-active">
                <div v-show="show">Hello</div>
            </transition>
        </div>
<script>
            const app=new Vue({
                el:"#root",
                data:{
                    show:true,
                }
            });
</script>
参考资料:

相关文章

  • Vue中的CSS transition和animation

    1. Vue中的CSS transition过渡 当我们插入一个元素的时候,vue会在过渡的第0帧给 标上"fad...

  • transition和animation

    本文主要介绍css动画相关的属性:transition和animation。 1. transition(过渡) ...

  • CSS3动画

    在CSS3中,动画效果使用animation属性来实现。animation属性和transition属性功能是相同...

  • 随笔03

    1、css3中transfrom和transition、animation的区别 transfrom描述元素静态样...

  • Vue配合Animate.css实现动画效果

    在Vue中可以通过过度transition配合animation实现自定义动画效果,但是需要对css3非常熟悉才能...

  • CSS3:过渡效果and帧动画

    css3中有三种和动画相关的属性:transform、transition、animation。transform...

  • JS、CSS 动画

    动画实现 css: animation transition transform js: setInterval ...

  • CSS 动画

    CSS 中的 transform,transition 和 animation 是分开的三部分内容,其中 tran...

  • CSS 动画

    CSS 中的 transform,transition 和 animation 是分开的三部分内容,其中 tran...

  • 前端知识归纳(3)-- HTML/CSS(part2 CSS动画

    目录概览: transition animation 常见CSS动画库 动画性能优化 一、transition 概...

网友评论

      本文标题:Vue中的CSS transition和animation

      本文链接:https://www.haomeiwen.com/subject/rkmjxctx.html