答题卡效果封装(一)原理分析/原生js实现

在前端开发中,我们大量使用开源很多UI框架和js框架,让我们使用的越好,做项目越快,但是同时让我们也对最基本的css属性和js最基本和最底层的api都遗忘,所以我们通过自己封装插件和组件,让我们更容易拾起最基本的知识点;以下我会从3个部分总结这个过程:1.原生js和jquery实现基本tab效果,2.使用面向对象js和jquery常用封装方法,3.通过vue封装和优化AnswerSheet组件

答题卡切换效果实现 AnswerSheet

  1. css过渡属性
    transform: scale(.85,.85) translate(0, -62px) !important;
  2. 控制 cardn card0 card1 card2 ,切换顺序



    
    
    
    答题卡
    



    

这是第一个问题0

这是第一个问题1

这是第一个问题2

这是第一个问题3

这是第一个问题4

效果:


1619138225(1).png

你可能感兴趣的:(答题卡效果封装(一)原理分析/原生js实现)