gpt4 book ai didi

html - Css Transition 只工作一次

转载 作者:行者123 更新时间:2023-11-28 02:38:29 24 4
gpt4 key购买 nike

我创建了一个过渡效果,当我单击位置图标时,会出现一个选择框并将位置图标推到左侧。但问题是它只在 firefox 中工作,而在 chrome 中它只工作一次。我不知道为什么会这样。任何形式的帮助将不胜感激。

enter image description here

enter image description here

这是我的HTML代码

  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right pad-top">
<a href="#">
<i class="fa fa-camera" aria-hidden="true" id="capture_image_01"></i>
</a>

<a href="#">
<i class="fa fa-map-marker" aria-hidden="true" id="location-show-hoide-point"></i>
</a>

<span id="post-location-conainer" style="display:none">
<select>
<option value="No Value Selected">Select Target City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
</select>
</span>

<input class="btn btn-primary btn-xs close-button" type="button" value="Post" id="btnPost" />
</div>

这是我的CSS

#post-location-conainer select{
overflow: hidden;
width: 0px;
transition: all 1s ease;
}

#post-location-conainer select.open{
width: 150px;
}

这是JS

    <script>
$( document ).ready(function() {
$(document).on('click','#location-show-hoide-point',function (){
$('#post-location-conainer select').toggleClass('open');
});
});

</script>

最佳答案

你必须稍微改变你的代码:

代码片段

$(document).ready(function() {
$('#location-show-hoide-point').on('click', function() {
$('span').toggleClass('open');
});
});
.dib-elements a {
display: inline-block;
vertical-align: middle;
}

span {
display: inline-block;
width: 0px;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;
overflow: hidden;
vertical-align: middle;
}

.open {
width: 135px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right pad-top dib-elements">
<a href="#">
<i class="fa fa-camera" aria-hidden="true" id="capture_image_01"></i>
</a>

<a href="#">
<i class="fa fa-map-marker" aria-hidden="true" id="location-show-hoide-point"></i>
</a>
<span>
<select id="post-location-conainer">
<option value="No Value Selected">Select Target City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
</select></span>

<input class="btn btn-primary btn-xs close-button" type="button" value="Post" id="btnPost" />
</div>

There is no need to use $(document).on('click','#location-show-hoide-point',function (){... as it is being used to delicately handle the jQuery events or better to say when elements are not present when DOM loads.

There is no need to use <span id="post-location-conainer" style="display:none"> i.e. inline styling when you are using toggleClass just to manipulate the width.

And always keep in mind to define inline DOM to inline-block or block when using them for spaces, divisioning, element wrapper.

关于html - Css Transition 只工作一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45732842/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com