CSS转换没有工作onclick

Question

我只想在页面左下角的点击中显示通知提醒。通知框正确显示，但转换不起作用。我试过这种方式。

＆＃13;

＆＃13;

#notification-alert {
  display: none;
  font-family: 'Montserrat-regular';
  color: white;
  bottom: 20px;
  right: 20px;
  position: fixed;
  background-color: #f4b251;
  border-bottom: 4px solid #E89F3C;
  color: #fff;
  padding: 20px;
  border-radius: 14px;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 500ms;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='submit' onclick='$("#notification-alert").show()'>



<div id="notification-alert">
  <span>Great job, you're under way!</span>
</div>

＆＃13;

＆＃13;

＆＃13;

以下是fiddle代码有什么问题？

Answer 1

这是工作结果。

＆＃13;

＆＃13;

var notificationTimer = 2000; // miliseconds to hide the notification alert

$('.submit-button').on('click', function () {
  $('.notification-alert').addClass('notification-alert--shown');
  setTimeout(function () {
    $('.notification-alert').removeClass('notification-alert--shown');
  }, notificationTimer)
});

＆＃13;

.notification-alert {
  color: white;
  bottom: 20px;
  right: 20px;
  position: fixed;
  background-color: #f4b251;
  border-bottom: 4px solid #E89F3C;
  color: #fff;
  padding: 20px;
  border-radius: 14px;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  transform: translateX(100%);
  transition: all 500ms;
  opacity: 0;
  z-index: -1;
}

.notification-alert--shown {
  opacity: 1;
  transform: translateX(0);
  transition: all 500ms;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="submit-button">show notification</button>

<div class="notification-alert">
  <span>Great job, you're under way!</span>
</div>

＆＃13;

＆＃13;

＆＃13;

我改变了一些事情：

1. 我将notification-alert更改为了一个类，因为将类用于CSS转换是一种很好的做法，因为这些类表示元素将转换到的不同状态。
2. 另外，我添加了一个新类notification-alert--shown，它表示显示该元素时的状态。
3. 单击按钮启动转换时，我使用jquery添加类notification-alert--shown。

现在我们需要解释CSS过渡的工作原理：

CSS转换通过向不同的CSS类添加帧来实现（作为一种好的做法）。为了实现转换，您至少需要两个类。在这种情况下，那是notification-alert和notification-alert--shown。这些类仅与属性transform和opacity不同（即具有冲突的属性）。

由于这两个类之间的属性不同，我可以告诉CSS在它们发生变化时转换（即在两者之间添加帧）。

因此，当我添加课程notification-alert--shown时，我告诉浏览器添加框架以从状态{opacity: 0; transform: translateX(100%);}过渡到新状态{opacity: 1; transform: translateX(0);} < / p>

我告诉浏览器，我想通过将all添加到transition: all ...来转换所有不同的属性。

您还在评论中提出了几个问题：

  

这很有效。但它只显示淡化效果。但为什么这种动画不起作用？transition-timing-function：cubic-bezier（0.175,0.885,0.32,1.275）;

这让我觉得你对transition-timing-function财产有轻微的误解。 transition-timing-function与元素的精确移动无关 - 它只关注您要求的转换如何随时间推移应用。您可以阅读有关转换计时属性here的更多信息。

你还要求再做一件事：

  

现在看起来很棒！几秒后我怎么能淡出？

为此，您可以使用window.setTimeout运行一些代码，在一定时间后删除该类。

我已经更新了示例以进行演示。

Here is a good tutorial on CSS transitions on CSS-tricks

Answer 2

您无法转换显示属性，它是可见与否，无中间步骤。但是，您可以使用动画不透明度轻松实现所需的视觉效果：

＆＃13;

＆＃13;

function showAlert () {
  var $alert = $("#notification-alert").show()
  setTimeout(function() {
    $alert.addClass("show")
  })
}

＆＃13;

#notification-alert {
  display: none;
  opacity: 0; /* <---- additional opacity */
  color: white;
  bottom: 20px;
  right: 20px;
  position: fixed;
  background-color: #f4b251;
  border-bottom: 4px solid #E89F3C;
  color: #fff;
  padding: 20px;
  border-radius: 14px;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 500ms;
}
#notification-alert.show {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" onclick="showAlert()">

<div id="notification-alert">
  <span>Great job, you're under way!</span>
</div>

＆＃13;

＆＃13;

＆＃13;

注意，您需要安排动画阶段在下一个渲染周期中运行，为此您可以设置setTimeout的延迟。

最后，为什么同时使用display: none和opacity: 0？好吧，我们不希望用户点击＆＃34;隐形＆＃34;意外警报，如果您只使用opacity，就会发生这种情况。因此，我们还需要使用display: none（或其他方式，如负面位置）隐藏警报。

Answer 3

过渡更像是动画。

mProgressDialog = new ProgressDialog(getActivity());
        mProgressDialog.setMessage("Wait a moment, loading image...");
        mProgressDialog.setCanceledOnTouchOutside(false);
        mProgressDialog.setCancelable(false);
        mProgressDialog.show();

        Picasso.with(getActivity()).load(mImagePath).into(mImageView, new Callback() {
            @Override
            public void onSuccess() {
                mProgressDialog.dismiss();
            }

            @Override
            public void onError() {
                mProgressDialog.dismiss();
                Toast.makeText(getActivity(), "Download failed", Toast.LENGTH_LONG).show();
            }
        });

所以你需要通过一个动作来调用那个动画。

div.sicon a {
    background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%);
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

同时检查浏览器支持情况，如果您仍然遇到任何问题，请尝试进行操作！检查样式表中的css-overrides，并查看div.sicon a:hover { background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%); } css hacks .. 可能有一些事情压倒你的过渡！

你应该看一下：https://www.w3schools.com/css/css3_transitions.asp

Answer 4

据我所知，CSS转换不会影响display: none CSS属性。为此，您需要更改代码，如下所示：

#notification-alert {
display: none;
font-family: 'Montserrat-regular';
color: white;
bottom: 20px;
right: 20px;
position: fixed;
background-color: #f4b251;
border-bottom: 4px solid #E89F3C;
color: #fff;
padding: 20px;
border-radius: 14px;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 500ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='submit' class="showme">
<div id="notification-alert">
  <span>Great job, you're under way!</span>
</div>
<script>
  $(".showme").on("click", function(){
  $("#notification-alert").fadeIn();
});
</script>

Answer 5

<script type="text/javascript">
        $('#alert').fadeIn("slow");setTimeout(function(){$("#alert").fadeOut(2000);},3000);
</script>

尝试此操作，将 #alert 更改为您的提醒ID。

Answer 6

像这样更新CSS：

#notification-alert{

  color: white;
  bottom: 20px;
  right: 20px;
  position: fixed;
  background-color: #f4b251;
  border-bottom: 4px solid #E89F3C;
  color: #fff;
  padding: 20px;
  border-radius: 14px;

}

HTML就像这样：

<input type='submit' onclick='$("#notification-alert").fadeIn(1000)'>

<div id="notification-alert" style="display:none;">
  <span>Great job, you're under way!</span>
</div>

Answer 7

你可以通过jQuery实现：

试试这个：

$("#notification-alert").css({"opacity" : "0"}); //put the opacity to 0
   $("#submit_btn").click(function(e){ //Create an identifier for the submit button
   $("#notification-alert").fadeTo(500, 1);
});

Answer 8

还有JS，像这样：

＆＃13;

＆＃13;

var button = document.getElementById('btn');

    button.onclick = function() {
        var alertBlock = document.getElementById('notification-alert')
      	alertBlock.classList.add('notification-alert-visible');
    };

＆＃13;

#notification-alert {
  color: white;
  bottom: 20px;
  right: 20px;
  position: fixed;
  background-color: #f4b251;
  border-bottom: 4px solid #E89F3C;
  color: #fff;
  padding: 20px;
  border-radius: 14px;
}

.notification-alert-hidden {
  transition: all .5s ease-in-out;
  opacity: 0;
}

.notification-alert-visible {
  opacity: 1;
}

＆＃13;

<input type='submit' id='btn'>

<div id="notification-alert" class="notification-alert-hidden">
  <span>Great job, you're under way!</span>
</div>

＆＃13;

＆＃13;

＆＃13;