2019-02-21使用JS控制vue样式过渡

先来看一下结果:


2019-02-21使用JS控制vue样式过渡_第1张图片
shadow.gif

1,这里使用了jquery,在index界面引入就行了,因为那是页面的入口;

  
    
    
    

    todo
  ![shadow.gif](https://upload-images.jianshu.io/upload_images/14707256-e4ba86086ee6e827.gif?imageMogr2/auto-orient/strip)

2,创建,引入,并编写组件代码:
因为transition标签有一些内置的方法(用法和绑定click点击事件差不多):


2019-02-21使用JS控制vue样式过渡_第2张图片
事件
2019-02-21使用JS控制vue样式过渡_第3张图片
用法

这是我的绑定,名字设为相同,方便知道是啥玩意;


2019-02-21使用JS控制vue样式过渡_第4张图片
template中的代码

(关闭css是为了避免CSS中有其他选项影响效果)

然后编写JS和CSS;

算了,我全部一起贴出来吧:







你可能感兴趣的:(2019-02-21使用JS控制vue样式过渡)