Vue中CSS动画原理、js动画以及多个动画transition

CSS动画

Vue transition动画效果对于transition包裹的内容有效
如果需要使得某个DOM元素有动画效果,可以将该元素用transition包裹起来,然后对于写CSS样式如 enter、leave-to、enter-active、leave-active。
transition name=“命名xx”
那么style CSS对应为 .xx-enter即前缀为xx,如果transition没有name属性,那么就是默认的前缀v-

//Vue使用animate.css库
<style>
 @keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
    transform: scale(1.5)
    }
     100% {
    transform: scale(1)
    }
}
.enter {
    opacity: 0s
}
style>
<body>
    <div>
        <transition>
            <div v-show="show">div>
        transition>
        <button @click="handleClick">togglebutton>
    div>
body>

使用CSSanimation库,在样式class一定要先写animated
Vue中CSS动画原理、js动画以及多个动画transition_第1张图片
在animated后需要加上你需要看到的动画效果的样式名字,可以去animation官网去找
Vue中CSS动画原理、js动画以及多个动画transition_第2张图片

JS动画

在transition表签上绑定事件,enter、beforeEnter、leave、afterLeave都是事件钩子,详情可参考Vue.js的官方文档。
enter/leave钩子函数有两个参数function(el, done)其中el是动画作用元素,done是回调函数表示动画结束时,一定要调用的。

<transition name="fade" @beforeEnter="handleBeforEnter"
            @enter="handleEnter"
>
    <div v-show="show">hellodiv>
transition>
<button @click="handleClick">button>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            show: true
        },
        methods: {
            handleClick: function() {
                this.show = !this.show
            },
            handleBeforeEnter: function(el) {
                el.style.color = 'red'; //el表示transition包裹的标签元素
            },//transition的钩子函数
            handleEnter: function(el,done) {
                setTimeout(() => {
                    el.style.color = 'blue';
                    done()   //done()表示动画结束
                },2000)
            }
        }
    })
script>

利用velocity.js代替CSS3的animation做动画效果。
------动画效果Velocity不仅包含了$.animate()的全部功能,还拥有:颜色动画、转换动画(transforms)、循环、缓动、SVG动画和滚动动画等特色功能。
-------它比$.animate()更快更流畅,性能甚至高于CSS3 animation,是jQuery和CSS3 transition的最佳组合
-------它支持所有现代浏览器,最低可兼容到IE8和Android 2.3
使用方法----在jQuery中使用时写法如下:

$("#test").velocity({
    left: "200px"
}, {
    duration: 450,
    delay: 300
});

没有jQuery时的写法:

var oDom=document.getElementById('#root');
Velocity(oDom,{
    opacity: 1
})

参考; https://www.cnblogs.com/shitaotao/p/7624636.html

多个元素/组件的过渡动画

前述是针对单个元素的过渡动画。现在多个元素的动画,需要给每个元素/组件添加key属性已做区别。

    <div id="root">
    
        <transition mode="in-out">
         
            <div v-if="show" key="hello">hellodiv>
            <div v-else="!show" key="bye">byediv>
        transition>
        <button @click="handleClick">togglebutton>
    div>
<script>
    var vm = new Vue({
        el: 'root',
        data: {
            show: true
        },
        methods: {
            handleClick: function() {
                this.show = !this.show;
            }
        }
    })
script>

列表过渡效果
< transition-group>为一个真实的DOM元素渲染,默认是span,但是可以通过tag属性声明为哪个元素进行渲染,tag=“ul” 即为ul渲染效果.
注意,每个 < transition-group> 的子节点必须有 独立的 key ,动画才能正常工作
Vue中CSS动画原理、js动画以及多个动画transition_第3张图片

你可能感兴趣的:(前端)