vue动画效果实现方法示例

本文实例讲述了某视频剪辑软件动画效果实现方法。分享给大家供大家参考，具体如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net vue动画/title脚本src=' http :https://cdn。bootcss。com/vue/2。4 .4/vue。量滴js '/script link rel=' style ' href=' https://cdn。bootcss。com/animate。CSS/2.0/动画。CSS ' rel='外部无跟随'/style # box { width :400 px；余量： 0自动} # div1 {宽度：100px高度：100 px背景：红色；} /style/headbody div id='box '输入类型='按钮'值='按钮@ click=' toggle ' div id=' div 1 ' class=' animated ' v-show=' bSign ' transition=' bounce '/div/div脚本new Vue({ El : ' # box }，data:{ bSign:true }，methods : { toggle(){ this。bSign=！this.bSign} }，transitions:{ //定义所有动画名称蹦跳：{输入类zoomInLeft '，//动画进入离开：类' zoomutright '//动画离开} } });/脚本/正文/html运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。