Vue Notes14:点击按钮显示或隐藏Div块

Vue Notes14:点击按钮显示或隐藏Div块

Tips 方法一方法二

Tips

若style在script下面，所以在html中设置

方法一


<!DOCTYPE html>
<html>
<head>
        <script src="/jquery/jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function() {
                    $("#div1").toggle();
                });
            });
        </script>
</head>
<body>
        <h3>点击按钮显示或隐藏Div块</h3>
        <button type="button">按钮</button>
        <div id="div1" style="border:2px solid #ff0000">
            再点击一下按钮我就会隐藏起来.
        </div>
</body>
</html>

方法二


<!DOCTYPE html>
<html>
<head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
  	function showOrHide(){
  		var div = $("#div1").get(0);
  		if(div.style.display == ""){
  			div.style.display = "none";
  		}else{
  			div.style.display = "";
  		}
  	}
    </script>
</head>
<body>
    <h3>点击按钮显示或隐藏Div块</h3>
    <button οnclick="showOrHide()" type="button">按钮</button>
    <div id="div1" style="display: none;border:2px solid #ff0000;">
        再点击一下按钮我就会隐藏起来.
    </div>
</body>
</html>

notion image

notion image

点击按钮显示或隐藏Div块_GRAY_KEY的博客-CSDN博客_点击隐藏div

通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换。代码如下：方法一：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;script src="/jquery/jquery-1.11.1.min.js"&gt;&lt;/script&gt; ...

点击按钮显示或隐藏Div块_GRAY_KEY的博客-CSDN博客_点击隐藏div

https://blog.csdn.net/GRAY_KEY/article/details/80073022

点击按钮显示或隐藏Div块_GRAY_KEY的博客-CSDN博客_点击隐藏div

元素显示与隐藏时的 transition动画效果原生与框架实现_Quiet-Night的博客-CSDN博客_css缓慢消隐

近来看到饿了么 App和 h5 站上，在商家详情页点餐之后，底部放置了一个点击之后能够弹出模态框查看点餐详情的元素，其中有个背景遮罩层的渐进显隐的效果。凭着我少许的经验，第一时间的想法是觉得这个遮罩层应该是使用 display:none;来控制隐藏和显示的，但是这个属性会破坏 transition 动画，也就是说如果遮罩层是使用了这个属性来控制显示与隐藏，那么渐进显隐的效果似乎很难达到，效果应该是瞬间显示与隐藏才对。利用框架实现这种效果真的是 so easy ，不逼逼上代码。无图无真相，看看效果助助兴：简直不能更简单 react本身的单独库没有自带过渡动画，不过有个 Animation Add-Ons: react-addons-css-transition-group 样式如下：以上都是框架实现，但如果项目历史悠久，根本就没用到这些亮瞎人眼的框架，充其量用了个 1.2版本的 jquery ，那么上面方法可都用不到了，我希望找到一种通用的原生方式，不利用任何框架。其中一种方案如题所示，因为 visibility这个属性同样能够控制元素的显隐，而且， visibility属性在值 visible 与 hidden的来回切换中，不会破坏元素的 transition 动画。不过 visibility与 display 之间控制元素显隐的最终效果还是有些差别的。设置了 visibility: hidden; 的元素，视觉上确实是不可见了，但是元素仍然占据该占据的位置，仍然会存在于文档流中，影响页面的布局，只不过设置了此属性的元素在视觉上看不到，在页面的原位置上留下一片空白而已（如果此元素具有宽高并且使用默认定位）。而设置了 display:none; 的元素，其既视觉上不可见，同时也不会占据空间，也就是说已经从文档流中消失了。 visibility控制元素显隐同样是瞬时发生的，不过这种瞬时发生的情况又和 display的那种瞬时发生不太一样， display是根本不会理会设置的 transition 过渡属性，设置了也和没设置一样。但 visibility是有可能会理会这个值的，不过只理会

元素显示与隐藏时的 transition动画效果原生与框架实现_Quiet-Night的博客-CSDN博客_css缓慢消隐

https://blog.csdn.net/DeepLies/article/details/76696579

元素显示与隐藏时的 transition动画效果原生与框架实现_Quiet-Night的博客-CSDN博客_css缓慢消隐


animate__backInLeft

vue3之transition动画组件_小渣亮的博客-CSDN博客_transition vue3

目录vue3之transition动画组件一个简单的过度效果淡入淡出自定义过度动画的类名animate动画库vue3之transition动画组件 <transition name="fade"> <div v-if="flag2" class="box">我是动画啊</div> </transition>动画组件就是使用 transition 组件，然后使用 name的定义传递进入组件动画的类名等样式触发机制

vue3之transition动画组件_小渣亮的博客-CSDN博客_transition vue3

https://blog.csdn.net/weixin_43845137/article/details/123381986

vue3之transition动画组件_小渣亮的博客-CSDN博客_transition vue3