vue中动画关键帧keyframes 和 animation 和animate动画库 |
您所在的位置：网站首页 › animate关键帧和帧 › vue中动画关键帧keyframes 和 animation 和animate动画库 |
|
（1） @keyframes fontScale { 0% { font-size: 30px; } 100% { font-size: 50px; } } .fade-leave-active { animation: fontScale 3s } .fade-enter-active { animation: fontScale 3s } click me sfsf new Vue({ el: '#demo', data: { show: true } })特点：transition name 包裹 显示隐藏的标签，样式中：@keyframes定义动画的名字和开始到结束的样式，name-enter-active和name-enter-active使用animation动画，设置时间、reverse等值。 （2）name-enter-active 和name-leave-active 是系统添加的，可以自己设置这两个类的名字 .de { height: 100px; width: 100px; background: red; } @keyframes fontScale { 0% { height: 30px; } 100% { height: 50px; } } .leave { animation: fontScale 3s } .enter { animation: fontScale 3s reverse; } click me sfsf new Vue({ el: '#demo', data: { show: true } })（3）这样就可以使用animation库 click me sfsf new Vue({ el: '#demo', data: { show: true } })
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |