为什么没有动画啊

(function(){

    const methods = {

        appendChild(parent, ...children) {

          children.forEach(el => {

            parent.appendChild(el);

          });

        },

        $(selector, root = document) {

          return root.querySelector(selector);

        },

        $$(selector, root = document) {

          return root.querySelectorAll(selector);

        }

      };

    let searchBar = function(options){

        this._init(options);

        this._createElement(options);

        this._addclick();

        //this._injecti();

        //this._show();

    }

    searchBar.prototype._init=function({element,name,searchdata}){

        this.dtlist=[]

        this.name = name;

        this.element = document.querySelector(element);

        for(let i in searchdata){

            this.dtlist.push(i)

        }return

    }

    searchBar.prototype._createElement=function({element,searchdata}){

        let AppendText =    `<div class="title">${this.name}</div>

                                    <div class="seletor">

                                        <div class="search_bar">

                                            <div class="seletor_left_bar">

                                                <p class="placeholder">未选择</p>

                                            </div>

                                            <div class="seletor_right_bar">

                                                <div class="arrow"></div>

                                            </div>

                                        </div>

                                        <div class="search_result">

                                            <div class="inner_search search_container">

                                                <input type="text" name="" id="" placeholder="搜索">

                                            </div>

                                        </div>

                            </div>`;

        document.querySelector(element).innerHTML = AppendText

        for(let i of this.dtlist){

            let createdt = document.createElement("dl")

            createdt.innerHTML = `<dt>${i}</dt>`

            methods.appendChild(methods.$(".search_result"),createdt)

            for(let l of searchdata[i]){

                let createdd = document.createElement("dd")

                createdd.innerHTML = l

                methods.appendChild(createdt,createdd)

            }

        }

        methods.$(".search_result").classList.add("display")

        console.log(document.getElementsByTagName("dd"))

    }

    searchBar.prototype._addclick=function(){

            methods.$(".search_bar").addEventListener("click",function(){

                if(methods.$(".search_result").classList.contains("display")){

                    methods.$(".search_result").classList.remove("display") 

                }else{methods.$(".search_result").classList.add("display") }

            })

            for(let i=0;i<document.getElementsByTagName("dd").length;i++){

                document.getElementsByTagName("dd")[i].addEventListener("mouseover",function(){

                    this.classList.add("mouseovering")

                })

                document.getElementsByTagName("dd")[i].addEventListener("mouseout",function(){

                    this.classList.remove("mouseovering")

                })

                document.getElementsByTagName("dd")[i].addEventListener("click",function(){

                    for(let u = 0;u<document.getElementsByTagName("dd").length;u++){

                        document.getElementsByTagName("dd")[u].classList.remove("clicked")

                    }

                    this.classList.add("clicked")

                    methods.$(".search_result").classList.add("display")

                })

            }

    }

    window.$search= searchBar

})(window,document)

css

*{margin: 0;padding: 0;}

.wrap{

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    height: 100%;

    width: 100%;

    position: absolute;

}

.wrap>div{margin: 20px 0;}

.wrap>div>div{margin: 10px 0;}

.customize_seletor{display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;}

.title{color: #3498db;font-size: 20px;font-weight: bold;text-shadow: 0 0 10px #3498db;}

.seletor{width: 300px;height: 30px;border: 1px solid #3498db;position: relative;

        box-shadow: 0px 0px 5px #3498db;}

.search_bar{display: flex;height: 100%;}

.seletor_left_bar,.seletor_right_bar{height: 100%;}

.seletor_left_bar{width: 80%;line-height: 30px;margin-left: 10px;font-weight: bold;}

.seletor_right_bar{width: 20%;position: relative;

    background-color: #3498db; color: white;

    display: flex;

    justify-content: center;

    align-self:center;}

.arrow{

    position: absolute;

    top: 50%;

    transform: translate(0,-50%);

    width: 0;

    height: 0;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-top: 10px solid white;

    -webkit-transform: translate(0,-50%);

    -moz-transform: translate(0,-50%);

    -ms-transform: translate(0,-50%);

    -o-transform: translate(0,-50%);

}

.search_result{

    overflow-y:scroll;

    max-height: 250px;

    position: absolute;

    top: 30px;

    left: -1px;

    border: 1px solid #3498db;

    box-shadow: 0px 0px 5px #3498db;

    width: 300px;

    background-color: white;

    display: flex;

    flex-direction: column;

    align-items: center;

    transition: 0.4s;

    -webkit-transition: 0.4s;

    -moz-transition: 0.4s;

    -ms-transition: 0.4s;

    -o-transition: 0.4s;

}

.inner_search{width: 260px;height: 25px;border: 1px dashed gray;margin: 5px 0;}

.inner_search>input{outline: none;height: 100%;width: 100%;border:0px}

dl{width: 100%;}

dt,dd{height: 25px;margin: 5px 0;padding-left: 10px;}

dt{font-weight: bolder;font-size: 15px;}

dd{padding-left: 35px;font-size: 15px;font-weight: bold;}

.display{height: 0px;border: none;}

.mouseovering{background-color: #ecf0f1;}

.clicked{background-color: #3498db;color: white;}

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="index.css">

</head>

<body>

    <div id="wrap" class="wrap">

        <div class="customize_seletor">

        </div>

    <div>

      <p id="out">之前的结果是</p>

    </div>

    <div style="text-align: center;margin-top: 60px;">

      <div class="title">原生select</div>

      <select>

        <option value="1" type="构建工具">Babel</option>

        <option value="2" type="构建工具">Webpack</option>

        <option value="3" type="构建工具">Rollup</option>

        <option value="4" type="前端框架">Vue</option>

        <option value="5" type="前端框架">Vue</option>

        <option value="6" type="前端框架">Vue</option>

        <option value="7" type="前端框架">Vue</option>

      </select>

    </div>

  </div>

  <script src="Data.js"></script>

  <script src="index.js"></script>

  <script src="jquery-3.1.1.min.js"></script>

  <script>

      const result = new $search({

        element:".customize_seletor",

        name:"看来可以",

        searchdata

      })

  </script>

</body>

</html>